首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >D3.js <div>不工作

D3.js <div>不工作
EN

Stack Overflow用户
提问于 2017-03-01 04:56:07
回答 1查看 467关注 0票数 0

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

代码语言:javascript
复制
    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})
}

我在body中添加了两个div,但此时似乎只有一个在工作。使用上面的代码,只有第一个(时间序列)有效。如果我删除函数中“注释”注释之前的所有内容,那么第二个div (键)就可以正常工作了。

代码语言:javascript
复制
<div id="timeseries"></div>
<div id="key"></div>

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

需要进行哪些更改才能正常工作?

EN

回答 1

Stack Overflow用户

发布于 2017-03-01 05:51:49

您需要学习如何使用浏览器的开发人员工具。

当我在Chrome中运行你的代码时,Chrome的开发工具向我显示了错误Uncaught ReferenceError: container is not defined,指向这一行:

代码语言:javascript
复制
    .attr("x", container.height/2)

看到问题了吗?

我觉得你想

代码语言:javascript
复制
    .attr("x", container_dimensions.height/2)

而不是。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42518583

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档