Question

也许不是一个完美的标题，但我不知道如何实际描述它，因为我对网页设计和编程以及d3都很陌生。我有以下代码：

    function draw(data) {
    "use strict";

    var container_dimensions = {width: 900, height: 400},
        margins = {top:10, right:20, bottom:30, left:60},
        chart_dimensions = {
            width: container_dimensions.width - margins.left - margins.right,
            height: container_dimensions.height - margins.top - margins.bottom
        };

    var chart = d3.select("#timeseries")
        .append("svg")
            .attr("width", container_dimensions.width)
            .attr("height", container_dimensions.height)
        .append("g")
            .attr("transform", "translate (" + margins.left + "," + margins.top + ")")
            .attr("id", "chart");

    var time_scale = d3.scaleTime()
                       .range([0, chart_dimensions.width])
                       .domain([new Date(2008, 0, 1), new Date(2011, 3, 1)]);

    var percent_scale = d3.scaleLinear()
                          .range([chart_dimensions.height, 0])
                          .domain([65, 90]);

    var time_axis = d3.axisBottom(time_scale);

    var count_axis = d3.axisLeft(percent_scale);

    chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + chart_dimensions.height + ")")
        .call(time_axis);

    chart.append("g")
        .attr("class", "y axis")
        .call(count_axis);

    d3.select(".y.axis")
      .append("text")
        .attr("text-anchor", "middle")
        .text("percent on time")
        .attr("transform", "translate(-35, 135)rotate (-270)")
        .attr("x", container.height/2)
        .attr("y", 50);

    //comment
    var key_items = d3.select("#key")
                      .selectAll("div")
                      .data(data)
                      .enter()
                      .append("div")
                          .attr("class", "key_line")
                          .attr("id", function(d) {return d.line_id;})

    key_items.append("div")
        .attr("id", function(d){return "key_square_" + d.line_id})
        .attr("class", "key_square")

    key_items.append("div")
        .attr("class", "key_label")
        .text(function(d){return d.line_name})
}

我在身体中添加了两个div，但当时只有一个似乎正在工作。使用上面的代码，只有第一个（时间序列）工作。如果我在“评论”评论之前删除了函数中的所有内容，则第二个div（键）工作正常。

<div id="timeseries"></div>
<div id="key"></div>

<script>
    d3.json("data/subway_wait_mean.json", draw);
</script>

需要改变什么才能正常工作？

Answer 1

您需要了解如何使用浏览器的开发者工具。

当我在Chrome中运行您的代码时，Chrome的开发工具向我显示错误Uncaught ReferenceError: container is not defined，指向此行：

    .attr("x", container.height/2)

看到问题？

我想你想要

    .attr("x", container_dimensions.height/2)

代替。

D3.js <div>无效

1 个答案: