多行d3

Question

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

我的数据采用这种格式(请注意,2组数据可能不包含相同数量的点,而且我的2组测量值之间的时间不完全同步):

var data = [{key:"kmm03",value:[{"time":1364108443000,"mesure":"1.6299999952316284"},{"time":1364108503000,"mesure":"1.100000023841858"},{"time" :1364108563000,"mesure":"1.159999966621399"}},{key:"kmm04",值:[{"time":1364108416000,"mesure":"2.690000057220459"},{"time":1364108476000,"mesure": "3.319999933242798"},{ "时间":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);});

这是一个工作版本.为了使它工作,我做了一些其他的改变:

缺少值数组的1-个右括号

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