javascript - 如何根据函数参数在 D3 中添加半圆？

Question

我的问题的基本示例基于 this chart 。目标是仅用组颜色填充半个圆。

This SO问题解释了如何制作半圆。

这是原始代码片段

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

这里添加一个半圆

var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
              .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
grad.append("stop").attr("offset", "50%").style("stop-color", "lightblue");
grad.append("stop").attr("offset", "50%").style("stop-color", "white");
var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
enter code here

我怎样才能让这个毕业生依赖于d.group？ 我试过了

• get_grad() 函数并让它返回 grad
• set_grad() 函数并让它设置填充属性

但是，我没有成功。谁能帮助我？

Answer 1

如果您希望不同的元素具有不同的渐变，则必须使用相同的数据绑定(bind)过程来创建渐变本身:

var defs = svg.append("defs")
    .selectAll("foo")
    .data(data)
    .enter()
    .append("linearGradient")
    //etc...

请记住，ID 必须唯一。在下面的演示中我正在做:

.attr("id", function(d) {
    return "grad" + d
})

...创建唯一 ID。

在演示中，这是您可能感兴趣的部分:

defs.append("stop")
    .attr("offset", "50%")
    .style("stop-color", function(d) {
        return colours(d)
    })

如您所见，我正在根据数据应用停止颜色。

看一下演示(这不是力导向图表，而只是一个使用不同梯度的元素的演示):

var svg = d3.select("svg");

var colours = d3.scaleOrdinal(d3.schemeCategory10);

var defs = svg.append("defs")
  .selectAll("foo")
  .data(d3.range(5))
  .enter()
  .append("linearGradient")
  .attr("id", function(d) {
    return "grad" + d
  })
  .attr("x1", "0%")
  .attr("x2", "0%")
  .attr("y1", "100%")
  .attr("y2", "0%");

defs.append("stop")
  .attr("offset", "50%")
  .style("stop-color", function(d) {
    return colours(d)
  })

defs.append("stop")
  .attr("offset", "50%")
  .style("stop-color", "white");

var circles = svg.selectAll("foo")
  .data(d3.range(5))
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", function(d) {
    return 25 + d * 62
  })
  .attr("r", 25)
  .attr("stroke", "dimgray")
  .attr("fill", function(d) {
    return "url(#grad" + d + ")"
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

您还可以使用偏移量:

var svg = d3.select("svg");

var colours = d3.scaleOrdinal(d3.schemeCategory10);

var defs = svg.append("defs")
  .selectAll("foo")
  .data(d3.range(5))
  .enter()
  .append("linearGradient")
  .attr("id", function(d) {
    return "grad" + d
  })
  .attr("x1", "0%")
  .attr("x2", "0%")
  .attr("y1", "100%")
  .attr("y2", "0%");

defs.append("stop")
  .attr("offset", function(d) {
    return 20 + d * 15 + "%"
  })
  .style("stop-color", function(d) {
    return colours(d)
  })

defs.append("stop")
  .attr("offset", function(d) {
    return 20 + d * 15 + "%"
  })
  .style("stop-color", "white");

var circles = svg.selectAll("foo")
  .data(d3.range(5))
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", function(d) {
    return 25 + d * 62
  })
  .attr("r", 25)
  .attr("stroke", "dimgray")
  .attr("fill", function(d) {
    return "url(#grad" + d + ")"
  })

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>