0

我是 D3 的新手。我只是想画一个折线图。为此我只是放了静态值，它工作正常，但是当我从服务器 db 图中获取数据时没有得到正确的数据。我得到的问题是 x 和 y 轴值正在获取。但没有得到折线图。这是代码

// Line chart creation....................................................


  var deviceTime = 0;
  var margin = { top: 20, right: 80, bottom: 30, left: 50 };

var da = '<%=@display.to_json(:only => [:DeviceTime, :Speed])%>'

var margin = { top: 20, right: 80, bottom: 30, left: 50 };
var dataset=JSON.parse(da.replace(/&quot;/g,'"'));

//test code TODO :need to move somewhere else
var data = [];
for (var vAlue in dataset[0]) {
    var tempData = d3.values(dataset[0][vAlue]);
    data.push(tempData[1]);
}
// test end

var yExtents = d3.extent(d3.merge(dataset), function (d) { return d.Speed; });
var xExtents = d3.extent(d3.merge(dataset), function (d) { return d.DeviceTime; });

//alert("xevents[0]-------"+xExtents[0] "xevents[1]-------"+xExtents[1]);
var w = 900;
var h = 400;
var padding = 30;

deviceTime = xExtents[1];

//Create scale functions

var xScale = d3.scale.linear()
.domain([xExtents[0], xExtents[1]])
.range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
.domain([0, yExtents[1]])
//.domain([0, 160])
.range([h - padding, padding]);

//Define X axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);

//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);

///////////////// need to remove


var line = d3.svg.line()
.x(function (d, i) { return xScale(i); })
.y(function (d, i) { return yScale(d); });

//Create SVG element

var svg = d3.select("#bar-demo")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//Create X axis
var hh = svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);


//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);


var path = svg.append("g")
//.attr("clip-path", "url(#clip)")
.append("path")
.data([data])
.attr("class", "line")
.attr("transform", "translate(" + 102 + ",0)")
.attr("d", line);



svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0-margin.left+10)
        .attr("x",0-h/2)
        .attr("dy", "1em")
            .style("text-anchor", "middle")
        .text("Speed km/h");

svg.append("text")
        .attr("y", h)
        .attr("x", h)
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Time Stamp");
4

0 回答 0