1

我正在尝试用 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", value:[{"time":1364108416000,"mesure":"2.690000057220459"},{"time":1364108476000,"mesure": "3.319999933242798"},{"time":1364108536000,"mesure":"3.140000104904175"},{"time":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);
4

1 回答 1

5

d3 selection.data()接受一个元素数组。在您的代码中，数据 var 是两个对象的数组。当您在 d 上调用 line 时，d3 会在每个元素中查找时间和度量属性。这些不存在，因此没有附加路径。

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

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

这是一个工作版本。为了让它工作，我做了一些其他的改变：

1-缺少值数组的右括号

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

于 2013-03-24T17:08:01.520 回答