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

我的问题的基本示例建立在以下基础上。目标是用组颜色只填充半个圆

所以这个问题解释了如何做半圆

下面是原始代码的一个片段

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（）函数，并让它返回梯度
• 一个set_grad（）函数，并让它设置fill属性

---

然而，我两个都没能工作。谁能帮助我？

如果您想拥有具有不同渐变的不同元素，则必须使用相同的数据绑定过程来创建渐变：

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.选择（“svg”）；
var COLORS=d3.scaleOrdinal（d3.SchemeCategory 10）；
var defs=svg.append（“defs”）
.selectAll（“foo”）
.数据（d3.范围（5））
.输入（）
.append（“linearGradient”）
.attr（“id”，函数（d）{
返回“梯度”+d
})
.attr（“x1”，“0%”）
.attr（“x2”，“0%”）
.attr（“y1”，“100%”）
.attr（“y2”，“0%”）；
定义附加（“停止”）
.attr（“抵销”、“50%”）
.样式（“停止颜色”，功能（d）{
返回颜色（d）
})
定义附加（“停止”）
.attr（“抵销”、“50%”）
.风格（“停止颜色”、“白色”）；
var circles=svg.selectAll（“foo”）
.数据（d3.范围（5））
.输入（）
.附加（“圆圈”）
.attr（“cy”，50）
.attr（“cx”，功能（d）{
返回25+d*62
})
.attr（“r”，25）
.attr（“笔划”、“灰色”）
.attr（“填充”，功能（d）{
返回“url（#grad“+d+”）
})

是的，但是我们能把它变成一个函数吗？我正在考虑多个类，因此元素的数量会随着N！的增加而增加！。每个数据集的类数可能会发生变化。这样，我们可以提前制作45个元素，而只需要10个元素。（（10choose2）=45，（5choose2）=10）我刚才向你展示了如何根据数据生成梯度，这就是你在问题中提出的问题。你上面的评论可能值得提出一个新问题，在这个问题上你可以更好地解释你想要什么。