Question

我正在尝试为d3.js

上的分层边缘图添加更多效果

这是基于与mbostock（https://bl.ocks.org/mbostock/7607999）相同的层次结构图。

当我将鼠标悬停在从JavaScript到JSON文件的链接时，我想分配特定的颜色。在您运行它时，它会自动在样式表中分配

例如：

JSON

[
{"name":"brand1","type:1","size":3938,"imports":["activity1"]}, colour assigned #8000ff
{"name":"brand2","type:2","size":3938,"imports":["activity2"]}, colour assigned #80bfff
{"name":"brand3","type:3","size":3938,"imports":["activity3"]}  colour assigned #66ffb3
]

在JavaScript中

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

link = link
    .data(packageImports(root.leaves()))
    .enter().append("path")
      .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
      .attr("class", "link")
      .attr("d", line);


function mouseovered(d) {
  node
      .each(function(n) { n.target = n.source = false; });

  link
      .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
      .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
    .filter(function(l) { return l.target === d || l.source === d; })
      .raise();

  node
      .classed("node--target", function(n) { return n.target; })
      .classed("node--source", function(n) { return n.source; });
}

我想添加以下声明

var fill = d3.scale.ordinal()
    .domain(d3.range(20))
    .range(["#eabe1d","#f7a51d","#e9962c","#ee7727","#f05620","#e82d24","#e91d26","#c62038","#ae1858","#1cbec9","#12aab5","#148ca5","#0a7887","#0a638b","#ec1559","#e61b4a","#b31c45","#a01b36","#651a5b"]);

但是从那里我不知道如何调用它来在JSON中搜索type1，type，type2属性。

尽管上面有JSON示例，但代码来自mbostock。

Answer 1

环顾四周之后，它似乎得到了JSON中的类型并在函数中调用它。

[
{"name":"brand1","stroke": "#8000ff","size":3938,"imports":["activity1"]}, colour assigned #8000ff
{"name":"brand2","stroke": "#8680ff","size":3938,"imports":["activity2"]}, colour assigned #80bfff
{"name":"brand3","stroke": "#66ffb3","size":3938,"imports":["activity3"]}  colour assigned #66ffb3
]

然后在链接变量

中调用它

link = link
    .data(packageImports(root.leaves()))
    .enter().append("path")
     .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
      .attr("class", "link")
      .attr("d", line);
      .style("stroke", function(d) { return d.data.stroke; });

虽然这不起作用，但链接正在从数据进行映射和构建以构建链接，但最后一行会破坏所有节点。

有人想过如何避免这种情况吗？

如何使用d3.js为JSON中的数据添加特定颜色

1 个答案: