也许不是一个完美的标题,但我不知道如何描述它,因为我对网页设计和编程以及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})
}我在body中添加了两个div,但此时似乎只有一个在工作。使用上面的代码,只有第一个(时间序列)有效。如果我删除函数中“注释”注释之前的所有内容,那么第二个div (键)就可以正常工作了。
<div id="timeseries"></div>
<div id="key"></div>
<script>
d3.json("data/subway_wait_mean.json", draw);
</script>需要进行哪些更改才能正常工作?
发布于 2017-03-01 05:51:49
您需要学习如何使用浏览器的开发人员工具。
当我在Chrome中运行你的代码时,Chrome的开发工具向我显示了错误Uncaught ReferenceError: container is not defined,指向这一行:
.attr("x", container.height/2)看到问题了吗?
我觉得你想
.attr("x", container_dimensions.height/2)而不是。
https://stackoverflow.com/questions/42518583
复制相似问题