Question

我正在尝试在d3中制作折线图，时间在x轴上。我在变量中使用json数据。我使用d3.time.format（）函数来格式化时间，但它给了我上面的错误。我正在学习d3所以请帮助。我的代码是：

<div id="viz"></div>
<script>

var width = 640;
var height = 480;
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().domain([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var data = [
{ "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
{ "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
{  "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
{ "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
{ "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 

var line = d3.svg.line()
.x(function(d, i) { return x(d.x_axis); })
.y(function(d, i) { return y(d.y_axis); })
.interpolate("linear");
var vis = d3.select("#viz")
.append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");
data.forEach(function(d) {
d.xAxis = d3.time.format("%d-%b-%y").parse(d.xAxis);
d.yAxis = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.x_axis; }));
y.domain(d3.extent(data, function(d) { return d.y_axis; }));

vis.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
vis.append("g")
.attr("class", "y axis")
.call(yAxis);
vis.append("svg:path")
.datum(data)
.attr("class", "line")
.attr("d", line);

Answer 1

您的代码中存在多个问题，因此我在下面创建了一个新问题，并对更改进行了一些评论。

<style>
   /* You need some styling for your line */
    .line{
        stroke:steelblue;
        fill:none
    }
</style>
<script>

    var width = 640;
    var height = 480;
    var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

    var x = d3.time.scale().range([0, width]);
     // You had a mistake filling the domain structure of your scale.
    var y = d3.scale.linear().range([height, 0]);
    var xAxis = d3.svg.axis().scale(x).orient("bottom");
    var yAxis = d3.svg.axis().scale(y).orient("left");
    var data = [
    { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292},
    { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292},
    {  "at": "2014-11-18T07:28:33.859Z", "value": 0.583292},
    { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292},
    { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; 
    //You were using non existing variables
    var line = d3.svg.line()
        .x(function(d) { return x(d.xAxis); })
        .y(function(d) { return y(d.yAxis); })
        .interpolate("linear");

    var vis = d3.select("#viz")
        .append("svg:svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");
    //You are using ISO format, use the correct time parser
    var iso = d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ");
    data.forEach(function(d) {
        d.xAxis = iso.parse(d.at); //You were parsing a non existing variable
        d.yAxis = parseFloat(d.value); //You were parsing a non existing variable
    });
    console.log(data);

     //The variables for the domain were not correct
    x.domain(d3.extent(data, function(d) { return d.xAxis; }));
    y.domain(d3.extent(data, function(d) { return d.yAxis; }));

    vis.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
    vis.append("g").attr("class", "y axis").call(yAxis);

    vis.append("svg:path").datum(data).attr("class", "line").attr("d", line);
</script>

如果有帮助，请告诉我

Answer 2

这是一个小提琴，展示了我认为你之后的事情：http://jsfiddle.net/henbox/n9s542w0/1/

要做出一些改变。

首先，关于如何使用d.y_axis与d.yAxis（与x相同）来设置\引用您引用的数据集的新元素存在一些不一致情节。我已将这些密钥设置为d.y_axis和d.x_axis。

下一步：

d.xAxis = d3.time.format("%d-%b-%y").parse(d.xAxis);

你的format在这里应该引用输入格式而不是输出，你应该解析d.at而不是d.xAxis（参见this answer for more），所以你应该：

d.x_axis = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse(d.at);

第三，当你追加这一行时，你应该以不同的方式处理data。变化：

vis.append("svg:path")
   .datum(data)
   .attr("class", "line")
   .attr("d", line);

到

vis.append("svg:path")
   .attr("class", "line")
   .attr("d", line(data));

根据this similar示例

最后，您将y域设置为两次，但从未设置范围。这一行：

var y = d3.scale.linear().domain([height, 0]);

应该阅读

var y = d3.scale.linear().range([height, 0]);

未捕获的TypeError：无法读取d3中未定义的属性“length”

2 个答案: