Javascript 如何在图形的D3节点中添加自定义颜色_Javascript_Svg_D3.js_Force Layout

Javascript 如何在图形的D3节点中添加自定义颜色

javascript svg d3.js

Javascript 如何在图形的D3节点中添加自定义颜色,javascript,svg,d3.js,force-layout,Javascript,Svg,D3.js,Force Layout,我将D3API用于一个图，其中一对节点是从父节点形成的。我想给整个图的节点上色，每个父节点有固定的颜色，子节点有不同的颜色，即根节点总是有红色，左边的子节点是蓝色，右边的子节点是绿色，如果只有一个子节点在那里它是绿色的。我正在使用这个api <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.

我将D3API用于一个图，其中一对节点是从父节点形成的。我想给整个图的节点上色，每个父节点有固定的颜色，子节点有不同的颜色，即根节点总是有红色，左边的子节点是蓝色，右边的子节点是绿色，如果只有一个子节点在那里它是绿色的。我正在使用这个api

<!DOCTYPE html>
<html>
 <head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.1"></script>
    <style type="text/css">

 line.link {
  stroke: #ccc;
}

circle.node {
 fill: #000;
 stroke: #fff;
 stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

   var w = 960,
  h = 500,
  r = d3.scale.sqrt().domain([0, 20000]).range([0, 20]);

 var force = d3.layout.force()
.gravity(.01)
.charge(-120)
.linkDistance(60)
.size([w, h]);

var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);

d3.xml("flare.xml", "application/xml", function(xml) {
  var nodes = self.nodes = d3.select(xml).selectAll("*")[0],
    links = self.links = nodes.slice(1).map(function(d) {
      return {source: d, target: d.parentNode};
     });

  force
  .nodes(nodes)
  .links(links)
  .start();

  var link = svg.selectAll("line.link")
  .data(links)
.enter().append("svg:line")
  .attr("class", "link")
  .attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });

  var node = svg.selectAll("circle.node")
  .data(nodes)
  .enter().append("svg:circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return r(d.textContent) || 5; })
  .call(force.drag);

    force.on("tick", function() {
    nodes[0].x = w / 2;
    nodes[0].y = h / 2;

   link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

      node.attr("cx", function(d) { return d.x; })
     .attr("cy", function(d) { return d.y; });
     });
    });

    </script>
  </body>
 </html>


line.link{
冲程：#ccc；
}
圆节点{
填写：#000；
冲程：#fff；
笔划宽度：1.5px；
}
var w=960，
h=500，
r=d3.scale.sqrt（）.domain（[0,20000]）.range（[0,20]）；
var-force=d3.layout.force（）
重力（.01）
。收费（-120）
.linkDistance（60）
.尺寸（[w，h]）；
var svg=d3.select（“body”）.append（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
xml（“flare.xml”、“application/xml”、函数（xml）{
var nodes=self.nodes=d3.select（xml）.selectAll（“*”）[0]，
links=self.links=nodes.slice（1）.map（函数（d）{
返回{source:d，target:d.parentNode}；
});
力
.节点（节点）
.链接（links）
.start（）；
var link=svg.selectAll（“line.link”）
.数据（链接）
.enter（）.append（“svg:line”）
.attr（“类”、“链接”）
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
var node=svg.selectAll（“circle.node”）
.数据（节点）
.enter（）.append（“svg:circle”）
.attr（“类”、“节点”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，函数（d）{返回r（d.textContent）| | 5；}）
.呼叫（强制拖动）；
force.on（“勾号”，函数（）{
节点[0].x=w/2；
节点[0]，y=h/2；
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
});

谁能帮我一下吗

SVG有自己的CSS属性，其中一个是

fill

。它设置SVG元素的填充颜色

以下是如何将其与D3配合使用：

var node = svg.selectAll("circle.node")
  .data(nodes)
  .enter().append("svg:circle")
  .style("fill", function (d) { return '#1f77b4'; })
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return r(d.textContent) || 5; })
  .call(force.drag);

在这里，所有节点的颜色值（

#1f77b4

）都是相同的。如果您想用特定的算法给节点上色，D3附带了预定义的

编辑：这里是。它的一个答案。

谢谢你的回答，它正在工作，我得到的所有节点都是蓝色的。如果我想在节点中添加自定义颜色，我必须写一个条件？是的。您必须通过更改

.style（“fill”，function（d）{return'#1f77b4'；}）

中的返回值来决定每个节点的颜色。您可以直接在XML文件中添加颜色，或将颜色映射到XML中已有的属性值（请参阅）。我无法在此处更改数据或无法使用XML文件。我必须设置一个条件，以确定哪个节点是根节点，哪个节点是childvar nodes=svg。selectAll（“circle.node”）.data（force.nodes（））.enter（）.append(“圆”）.attr（“类”、“节点”）.attr（“r”，8）/.style（“填充”，函数（d，i）{return d3.scale.category20（i）；}）.style（“填充”，函数（d，i）{return d3.scale.category20（i）；}）.call（强制拖动）；我正在做这件事，你能从这里帮助我吗？这是一条路，但是

d3.scale.category20（i）

不起作用。它应该是

d3.scale.category20（）（i）

，因为

d3.scale.category20（）

返回scale函数。