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

我有一个简单的散点图，带有路径：



我需要做的是用以下这些颜色为线着色：


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


要恢复我正在做的事情，这是我创建路径和给线条上色的部分。

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)

谢谢你们！

最佳答案

简短的回答：在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>

关于javascript - 如何根据值打印不同的路径颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57763164/