Question

单行使用以下数据集：

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

多行数据集（不生成任何行）

  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 },]

这是D3.JS代码，适用于一行，但不会产生第二行。对此代码进行的最佳修改是什么，以便我可以传递最多包含10个数据系列的多行数据集。另外，每条线的不同颜色的最佳方法是什么？

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 (d) { return d.x; })])
    .range([0, width]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, 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) { 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.append("path")
    .data([dataset])
    .attr("class", "line0")
    .attr("d", line);

Answer 1

首先dataset，这是一个点数组，需要成为数组数组的点数：

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 }]
]

随后，x和y域的x和y max计算需要在所有点阵列中找到最大值。所以他们必须达到这样的嵌套水平：

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

（yScale）的相同想法

最后，既然有多行，您应该使用d3.selection和.enter()为每个系列创建一个<path>，如下所示：

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

这里是working jsFiddle

如何在D3.JS中将数据集转换为多个不同的颜色线

1 个答案: