时间戳

首页 > 解决方案 > 如何根据值打印不同的路径颜色？

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)

多谢你们！

标签： javascriptd3.jssvgchartsscatter-plot

解决方案

简短的回答：根据 SVG 1 规范，你不能。

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

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

这是一个使用 a 的简单折线图的演示<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>

推荐阅读