Question

我有边缘，其中一些有标签＆＃34; instance_of＆＃34;连接。如何为具有＆＃34;＆＃34;实例的节点着色？一种颜色的连接？假设我有节点A和B（带连接），我想将它涂成蓝色和节点X和Y（连接）颜色为白色？现在我已经用颜色函数制作了这段代码。

var nodes = svg.selectAll("circle")
            .data(dataArray.nodes)
            .enter()
            .append("circle")
            .attr({"r": 15})
            .style("fill", function (d, i) { //change node color
                if (dataArray.edges[i].label == 'instance_of'){
                    return colors(i);
                }
            })
            .call(force.drag)

更新：我有：

 "nodes": [ 
{ "name": "0"},
{ "name": "1" },
{ "name": "2"  },
{ "name": "3" }],
"edges":[{ "source": 0, "target": 3, "label" : "instance_of" },
{ "source": 1, "target": 2, label" : "instance_of" },
{ "source": 0, "target": 1, "label" : "class_of },]

我想用一种颜色为节点[0]和节点[3]着色，因为它们有一个名为＆＃39; instance_of＆＃39;的链接，与节点[1]和节点[2]相同。

我有点不知所措。我应该写什么功能？

Answer 1

您的颜色选择器功能或选择错误。您的数据有＆＃34;标签＆＃34;在链接上，所以你可以提出问题：

"is this link 'instance_of'
       then color source and target circles with blue
  else make it red"

要做到这一点，首先需要创建源圈和目标圈：

var node = svg.selectAll(".node")

然后，创建链接：

var link = svg.selectAll(".link")

在链接功能上，您可以获得有关＆＃34;标签＆＃34;的信息。

  .style("fill", function (d, i) {
      if (d.label == 'instance_of'){
        console.log("#node_"+d.source.name, "blue");
        d3.select("#node_"+d.source.name).style("fill", "blue");
        d3.select("#node_"+d.target.name).style("fill", "blue");
      } else {
        console.log("#node_"+d.source.name, "red");
        d3.select("#node_"+d.source.name).style("fill", "red");
        d3.select("#node_"+d.target.name).style("fill", "red");
      }

您没有为链接设置样式，您选择的是来源和目标圈子。

Here's a working code

D3.js强制。自定义颜色

1 个答案: