多行d3

Question

我正在尝试用d3做一个简单的情节。当我一次只绘制一行时，它工作正常，但我想让我的代码更通用。

我的数据采用这种格式（请注意，2组数据可能不包含相同数量的点数，而且我的2套测量值之间的时间不完全同步）：

  

var data = [{key：“kmm03”，value：[{“time”：1364108443000，“mesure”：“1.6299999952316284”}，{“time”：1364108503000，“mesure”：“1.100000023841858”}，{ “时间”：1364108563000， “MESURE”： “1.159999966621399”}，   {key：“kmm04”，值：[{“time”：1364108416000，“mesure”：“2.690000057220459”}，{“time”：1364108476000，“mesure”：“3.319999933242798”}，{“time”：1364108536000，“ MESURE “：” 3.140000104904175 “}，{” 时间 “：1364108596000” MESURE “：” 2.9800000190734863" }}]

现在我尝试将它绘制成这样但我无法让svg行显示出来：

    var margin = {top: 20, right: 40, bottom: 20, left: 40};
    var width = 780 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;


    var time_scale = d3.time.scale()
        //.domain(time_extent)
        .domain([1364108443000, 1364112559000])
        .range([0, width]);

    var mesure_scale = d3.scale.linear()
        .domain([0,10])
        .range([height, 0]);

    var vis = d3.select("#box1")
    .append("svg:svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



    var time_axis = d3.svg.axis()
        .scale(time_scale)
        .orient("bottom");
    var mesure_axis = d3.svg.axis()
        .scale(mesure_scale)
        .orient("left");

    var set_axis_t = vis.append("svg:g")
      .attr("transform", "translate(0, " + height +")")
      .call(time_axis);

    var set_axis_m = vis.append("svg:g")
    .attr("transform", "translate(0, 0)")
    .call(mesure_axis);


    var line = d3.svg.line()
        .x(function(d){return time_scale(d.time);})
        .y(function(d){return mesure_scale(d.mesure);});

    var group = vis.selectAll('path')
       .data(data)
       .enter().append('path')
       .attr("d", line);

Answer 1

d3 selection.data()采用一系列元素。在您的代码中，data var是一个包含两个对象的数组。当您在d上调用line时，d3会查找时间并测量每个元素中的属性。这些不存在，因此不会附加路径。

要渲染的数量和时间值在每个对象的value属性中嵌套一层。

要绘制这些内容，请将.attr('d', line)更改为.attr("d", function(d) {return line(d.value);});

Here is a working version.为了使其发挥作用，我做了一些其他更改：

缺少值数组的1-右括号

2- .selectAll('path')不适用于数据，因为它与轴中的路径元素冲突。为了解决这个问题，我为数据路径分配了类标题，并使用.selectAll('.visline')来访问它们