Question

所以，我有一个Javascript对象，如： -

Object {data: Array[39], time: Array[39]}

object.data是一个值数组，而object.time是一个javascript日期对象的数组。

我正在尝试在D3中绘制折线图。我的代码的相关部分：

    // Line function
    var line = d3.svg.line()
             .x(function(d,i) { return x(d.time); })
             .y(function(d,i) { return y(d.data); });

    // Draw Line
    svg.append("path")
                  .datum([data])
                  .attr("class", "line")
                  .attr("d", line);

轴就像它们应该与数据一样就位，但线条没有显示出来。我猜我没有将值返回到行函数的x和y访问器，就像它们应该的那样。有什么指针吗？

编辑：

function draw(data) {

            // Margins and stuff
            var margin = {top: 20, right: 20, bottom: 20, left: 40};
            var width = 940 - margin.left - margin.right;
            var height = 500 - margin.top - margin.bottom;

            // X and Y axis' data
            var xAxisData = data.time;
            var yAxisData = data.data;

            // Scales
            var x = d3.time.scale().domain(d3.extent(xAxisData)).range([0, width]);
            // var x = d3.scale.linear().domain([100, 500]).range([0, width]);
            var y = d3.scale.linear().domain(d3.extent(yAxisData)).range([height, 0]);

            //Axes
            var xAxis = d3.svg.axis().scale(x).orient("bottom");
            var yAxis = d3.svg.axis().scale(y).orient("left");

            //Base Layer
            var svgContainer = d3.select('#graph').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 + ")");

            // Draw them Axes
            svgContainer.append("g").attr("class","axis bottom").attr("transform", "translate(0," + height + ")").call(xAxis);
            svgContainer.append("g").attr("class","axis left").call(yAxis);

            // Line function
            var line = d3.svg.line()
                .x(function(d,i) { console.log(i); return x(i); })
                .y(function(d,i) { console.log(d); return y(d.data); });

            var lineData = data.time.map(function (_, idx) {
                                console.log(data.data[idx], data.time[idx]);
                                return { data: data.data[idx], time: data.time[idx] };
                            });

            // Draw the Line
            svgContainer.append("path")
                  .datum([lineData])
                  .attr("class", "line")
                  .attr("d", line);

        }

Answer 1

您的数据确实不是line友好格式，您需要在d3.svg.line解释之前转置。

var lineData = data.time.map(function (_, idx) {
    return { data: data.data[idx], time: data.time[idx] }; 
});

Answer 2

svg.append("path")
    .attr("class","line")
    .attr("d",line(object));

整个路径是单个SVG元素，因此您可以使用点值将整个数据传递给它。

将数据传递给d3.svg.line（）

2 个答案: