颜色未定义 D3 折线图答案

【问题标题】：Color is not defined D3 line chart颜色未定义 D3 折线图
【发布时间】：2016-02-23 09:54:30
【问题描述】：

当我得到错误颜色未定义时，尝试使用 D3.js 绘制折线图。但是，当我在教程中查找它时，它没有在任何地方定义。是否应该以其他方式定义颜色？我所做的基本上是读取数据文件并为我的图表设置必要的组件。我是 D3 的初学者，我不确定我的编码风格是否正确。

d3.csv("test.csv", function (error, data) {

            console.log("inital data", data);

            var labelvar = "OutDistance";
            var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelvar });

            color.domain(varNames);

            var seriesData = varNames.map(function (name) {
                return {
                    name: name,
                    values: data.map(function (d) {
                        return { name: name, label: d[labelvar], value: +d[name] };
                    })
                };
            });

            console.log("seriesData", seriesData);

            x.domain(data.map(function (d) {
                return d.OutDistance;
            }));
            y.domain([
                d3.min(seriesData, function (c) {
                    return d3.min(c.values, function (d) { return d.value; });
                }),
                d3.max(seriesData, function (c) {
                    return d3.max(c.values, function (d) { return d.value; })
                })
            ]);

            var series = d3.selectALL(".series").data(seriesData)
            .enter().append("g")
            .attr("class" , "series");

            series.append("path")
            .attr("class","line")
            .attr("d" , function(d) {return line(d.values);})
            .style("stroke" , function(d){return color(d.name);})
            .style("stroke-width", "4px")
            .style("fill" , "none");

            var line = d3.svg.line()
            .interpolate("cardinal")
            .x(function(d){return x(d.label) + x.rangeBand() / 2 ;})
            .y(function(d) {return y(d.value);});

        });

【问题讨论】：

However when I look it up in tutorials it is not defined anywhere... 真的吗？你在看哪些教程？ 1、2、3、4、5、6....
@Mark delimited.io/blog/2014/3/3/…
在该特定示例中，color 定义为：var color = d3.scale.ordinal().range(["#001c9c","#101b4d","#475003","#9c8305","#d3c47c"]); 您可以看到他使用的完整代码here。

标签： javascript d3.js

【解决方案1】：

要使用 d3 颜色，您可以通过两种方式声明它们。

1) 使用 d3 分类颜色

var color = d3.scale.category10();

参考：http://bl.ocks.org/aaizemberg/78bd3dade9593896a59d

2) 使用 d3 线性标尺。

var color = d3.scale.linear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);

【讨论】：