CODEWITHSUNDEEP
javascriptd3.jsangulartypescript
Mitchell Y
Mitchell Y

Reputation: 113

How to configure d3-cloud to have links in Angular2?

What I'm trying to do is to add links into d3-cloud to pass its value to another page. Here is the code.

CSTWordCloudComponent.prototype.buildSVG = function (words) {
    moduleScope.host.append('svg')
        .attr("width", moduleScope.layout.size()[0])
        .attr("height", moduleScope.layout.size()[1])
        .append("g")
        .attr("transform", "translate(" + (moduleScope.layout.size()[0] / 2) + "," + moduleScope.layout.size()[1] / 2 + ")")
        .selectAll("text")
        .data(words)
        .enter()
        .append("a")
        .attr("routerLink",function (d) { return 'search-results'; })
        .append("text")
        .style("font-size", function (d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function (d, i) { return moduleScope.fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function (d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
        .text(function (d) { return d.text; });

};

As you can see, I'm trying to pass the value through routerlink and not href.

.attr("routerLink",function (d) { return 'search-results'; })

However, routerlink is not recognised. How do I go on with this?

Upvotes: 0

Views: 268

Answers (1)

Kevin
Kevin

Reputation: 11

with your code 

CSTWordCloudComponent.prototype.buildSVG = function (words) {
moduleScope.host.append('svg')
    .attr("width", moduleScope.layout.size()[0])
    .attr("height", moduleScope.layout.size()[1])
    .append("g")
    .attr("transform", "translate(" + (moduleScope.layout.size()[0] / 2) + "," + moduleScope.layout.size()[1] / 2 + ")")
    .selectAll("text")
    .data(words)
    .enter()
    .append("a")
    .attr("routerLink",function (d) { return 'search-results'; })
    .append("text")
    .style("font-size", function (d) { return d.size + "px"; })
    .style("font-family", "Impact")
    .style("fill", function (d, i) { return moduleScope.fill(i); })
    .attr("text-anchor", "middle")
    .attr("transform", function (d) {
    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
    .text(function (d) { return d.text; })
    .on('click', data => {
      //you should had imported 'Router' from '@angular/router'
      //suppose your link is https://google.com/tagname 
      router.navigateByUrl(`https//google.com/${data.text}`);
    })

};

I hope it can help you，and my english is pool,I hope you can understand

Upvotes: 1

Related Questions