D3.js <div> 不工作

Question

Maybe not a perfect title, but I don't know how to actually describe it since I'm fairly new to web design and programming, as well as to d3. I have the following code:

    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})
}

I added two div's in the body, but only one seems to be working at the time. With the above code, only the first (timeseries) works. If I delete everything in the function before the "comment" comment, the second div (key) works just fine.

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

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

What needs to be changed so this could work properly?

Answer 1

You need to learn how to use your browser's developer tools.

When I ran your code in Chrome, Chrome's dev tools showed me the error Uncaught ReferenceError: container is not defined , pointing to this line:

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

See the problem?

I think you want

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

instead.