Question

每次我添加到下面的数据集时，我的图表中都会添加一个新行。我需要做些什么改变，以便每次都有不同的随机颜色，以及我应该如何/在哪里为随机线添加图例？

var dataset = [
[{ x: 0, y: 100  }, { x: 1, y: 833  }, { x: 2, y: 1312 }, { x: 3, y: 1222 }, { x: 4, y: 1611 }],
[{ x: 0, y: 200  }, { x: 1, y: 933  }, { x: 2, y: 1412 }, { x: 3, y: 1322 }, { x: 4, y: 1711 }]]

代码：

var dataset = [
[{ x: 0, y: 100  }, { x: 1, y: 833  }, { x: 2, y: 1312 }, { x: 3, y: 1222 }, { x: 4, y: 1611 }],
[{ x: 0, y: 200  }, { x: 1, y: 933  }, { x: 2, y: 1412 }, { x: 3, y: 1322 }, { x: 4, y: 1711 }]]

var margin = { top: 20, right: 100, bottom: 30, left: 100 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(series) {
        return d3.max(series, function (d) { return d.x; })
    })])
   .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(series) {
        return d3.max(series, function (d) { return d.y; })
    })])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(0)
    .orient("bottom")
    .outerTickSize(0)
    .tickPadding(0);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .outerTickSize(0)
    .tickPadding(10);

var line = d3.svg.line()
    .x(function (d) { console.log(d.x, xScale(d.x));return xScale(d.x); })
    .y(function (d) { return yScale(d.y); });

//Create SVG element
var svg = d3.select("#visualisation")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top     + ")");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)

svg.selectAll("path.line").data(dataset).enter()
  .append("path")
  .attr("class", "line")
  .attr("d", line);

修改找到了如何添加颜色..

var color = d3.scale.category10();

    .attr("d", line)
     .style("stroke", function (d) {
         return color(d);

仍在研究如何添加图例。

修改

不幸的是，颜色是相同的，除非数据集的长度不同。如果我有数据集A）25分和B）30分它产生两种不同的颜色，但如果A和A都有。 B是25分然后是相同的颜色..任何想法？

Answer 1

关于颜色：var color = d3.scale.category10()将创建一个带有空域的序数刻度和带有十种颜色的范围，但如果没有设置域，则将根据您调用的序列color自动创建域。所以，我们必须设置一个域名：

var color = d3.scale.category10();
color.domain(d3.range(0,10));

然后随机画线：

.style("stroke", function (d) {
     return color(Math.floor(Math.random()*10))});

这满足了您对行的要求：

每次都是不同的随机颜色

检查这个小提琴，每次点击“运行”时颜色都不同：https://jsfiddle.net/gerardofurtado/qvrL3ey5/1/

关于图例，您必须向我们提供更多信息。

如何添加图例并使线条随机颜色作为新线添加到D3.JS

1 个答案: