javascript - 如何根据值打印不同的路径颜色？

Question

我有这个简单的散点图，有一条路径:

我需要做的是用这些颜色给线条着色:

• 增加时为绿色
• 减少时为红色

为了恢复我正在做的事情，这是我创建路径并为线条着色的部分。

svg.append('g')
    .selectAll("dot")
    .data(newData)
    .enter()
    .append("circle")
    .attr("cx", function(d) { return x(d.EarningsX); })
    .attr("cy", function(d) { return y(d.EarningsY); })
    .attr("r", 8)
    .style("fill", "#69b3a2")

path = svg.append("path")
    .datum(newData)
    .attr("d", d3.line().x(function(d) {
        return x(d.EarningsX)
    }).y(function(d) {
        return y(d.EarningsY)
    }))
    .attr("fill", "none")
    .attr("stroke", "#69b3a2")
    .attr("stroke-width", 1.5)

谢谢大家!

Answer 1

简短回答:根据 SVG 1 规范，您不能。

有多种方法可以绘制 <path>具有不同颜色的元素，但它们涉及复杂的步骤，例如使用渐变，但即使那样也不适用于您的特定情况。

好消息是您使用的是直线，而不是曲线。因此，您可以简单地删除 <path>。并使用多个 <line>元素，您可以单独绘制。

这是一个使用 <path> 的简单折线图的演示:

const svg = d3.select("svg")
const data = d3.range(30).map(d=>[d*10, Math.random()*150]);
const path = svg.append("path")
	.datum(data)
  .attr("d", d3.line());

path {
  fill: none;
  stroke: green;
  stroke-width: 2px;
}

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

如您所见，路径有一种颜色，而且只有一种颜色。

现在让我们更改代码以附加多个 <line>元素。这里有趣的部分是使用 d3.pairs 用于根据数据创建一对数组。在下面的演示中，就是这样:

const dataForTheLines = d3.pairs(data);

我不知道你的数据结构，但使用 d3,pairs非常简单。

然后，我们根据条件绘制线条。在下面的演示中，它是:

.style("stroke", d => d[1][1] < d[0][1] ? "red" : "green")

这是演示:

const svg = d3.select("svg")
const data = d3.range(30).map(d => [d * 10, Math.random() * 150]);
const dataLines = d3.pairs(data);
const lines = svg.selectAll(null)
  .data(dataLines)
  .enter()
  .append("line")
  .attr("x1", d => d[0][0])
  .attr("x2", d => d[1][0])
  .attr("y1", d => d[0][1])
  .attr("y2", d => d[1][1])
  .style("stroke-width", "2px")
  .style("stroke", d => d[1][1] > d[0][1] ? "red" : "green")

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