Question

所以我有一个创建路径的视图，我试图让它以便我绘制的每一行都有一个随机颜色。

我目前正在这样做 -

            var color = d3.scale.category20();


                //other code that does stuff 
        this.path = svg.append("path")
            .attr("d", line(newData))
            .style("stroke", function(d,i) { 
                var colorIndex = Math.random() * (20 - 0) + 0;
                return color(colorIndex); })
            .attr("fill","none")
            .attr("class","line");

这不会绘制不同颜色的线条。此外，当我这样做时

        this.path = svg.append("path")
            .attr("d", line(newData))
            .style("stroke", function(d,i) { 
                return color(4); })
            .attr("fill","none")
            .attr("class","line");

颜色仍然是蓝色。

为什么会这样？

Answer 1

这种情况正在发生，因为域名未设置 -

d3.scale.category10() not behaving as expected

有答案

Answer 2

我已经设置了一个小小的小提琴，向您展示设置线功能的正确方法。我还将颜色方案更改为类别（10）以显示更多对比色（您仍然可以使用category20并看到颜色的差异）。这是FIDDLE。

var lineFunction = d3.svg.line()
        .x(function (d) {
        return d.x;
    })
        .y(function (d) {
        return d.y;
    })
    .interpolate("linear");

D3.js类别色标不能正常工作

2 个答案: