Question

未定义错误颜色时，尝试使用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);});

        });

Answer 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"]);

颜色未定义D3线图

1 个答案: