Question

我要做的是将链接添加到d3-cloud中以将其值传递给另一个页面。这是代码。

_context.Events.Where(e => e.EventName == "Test")

正如您所看到的，我正在尝试通过 routerlink 而不是href传递价值。

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; }); };

但是，无法识别routerlink。我该如何继续这个？

Answer 1

使用您的代码

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}`);
    })

};

我希望它可以帮助你，我的英语是游泳池，我希望你能理解

如何配置d3-cloud在Angular2中拥有链接？

1 个答案: