嗨，我正在尝试从这里重新创建此条形图 --> http://bl.ocks.org/godds/ec089a2cf3e06a2cd5fc 但我的条形图没有显示出来，我很确定我已经为 y 和高度指定了正确的值。
有人可以帮我解决这个问题吗？
我的 csv 文件采用这种格式 -->
Day,Time,Trips //Ignore time column.
2015-01-01,13,17448
2015-01-01,14,17994
2015-01-01,15,18279
2015-01-01,16,16602
2015-01-01,17,17511
2015-01-01,18,18082
2015-01-01,19,16485
2015-01-01,20,15017
2015-01-01,21,14801
2015-01-01,22,14005
2015-01-01,23,11610
2015-01-02,00,9388
2015-01-02,01,6291
2015-01-02,02,4027
2015-01-02,03,2905
2015-01-02,04,2626
2015-01-02,05,2755
2015-01-02,06,5811
2015-01-02,07,8256
2015-01-02,08,10946
2015-01-02,09,13373
2015-01-02,10,15243
2015-01-02,11,16999
2015-01-02,12,19252
2015-01-02,13,19023
2015-01-02,14,20260
2015-01-02,15,20429
2015-01-02,16,18223
2015-01-02,17,20680
2015-01-02,18,23008
2015-01-02,19,23227
2015-01-02,20,20153
2015-01-02,21,19611
2015-01-02,22,21722
2015-01-02,23,21088
2015-01-03,00,19467
2015-01-03,01,16660
2015-01-03,02,13607
2015-01-03,03,10620
2015-01-03,04,7061
2015-01-03,05,3512
2015-01-03,06,4120
2015-01-03,07,5216
2015-01-03,08,7908
2015-01-03,09,11869
2015-01-03,10,14975
2015-01-03,11,17966
2015-01-03,12,21644
2015-01-03,13,23718
2015-01-03,14,24143
2015-01-03,15,23494
2015-01-03,16,20350
2015-01-03,17,22295
2015-01-03,18,25305
2015-01-03,19,25667
2015-01-03,20,20531
2015-01-03,21,21399
2015-01-03,22,22409
2015-01-03,23,22833
2015-01-04,00,20632
2015-01-04,01,17494
2015-01-04,02,13485
2015-01-04,03,9842
2015-01-04,04,6384
我的 HTML 文件-->
`<!DOCTYPE html>
<meta charset="utf-8" />
<style>
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="D3/d3.min.js"></script>
<script>
// sizing information, including margins so there is space for labels, etc
var margin = { top: 20, right: 20, bottom: 100, left: 40 },
width = 1800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
marginOverview = { top: 430, right: margin.right, bottom: 20, left: margin.left },
heightOverview = 500 - marginOverview.top - marginOverview.bottom;
// set up a date parsing function for future use
var parseDate = d3.time.format("%Y-%m-%d").parse;
// some colours to use for the bars
var colour = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
// mathematical scales for the x and y axes
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xOverview = d3.time.scale()
.range([0, width]);
var yOverview = d3.scale.linear()
.range([heightOverview, 0]);
// rendering for the x and y axes
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var xAxisOverview = d3.svg.axis()
.scale(xOverview)
.orient("bottom");
// something for us to render the chart into
var svg = d3.select("body")
.append("svg") // the overall space
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var main = svg.append("g")
.attr("class", "main")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var overview = svg.append("g")
.attr("class", "overview")
.attr("transform", "translate(" + marginOverview.left + "," + marginOverview.top + ")");
// brush tool to let us zoom and pan using the overview chart
var brush = d3.svg.brush()
.x(xOverview)
.on("brush", brushed);
// setup complete, let's get some data!
d3.csv("trips.csv", parse, function(data) {
// data ranges for the x and y axes
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);
xOverview.domain(x.domain());
yOverview.domain(y.domain());
// data range for the bar colours
// (essentially maps attribute names to colour values)
// colour.domain(d3.keys(data[0]));
// draw the axes now that they are fully set up
main.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
main.append("g")
.attr("class", "y axis")
.call(yAxis);
overview.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + heightOverview + ")")
.call(xAxisOverview);
// draw the bars. Here is the main Problem i guess..
main.append("g")
.attr("class", "bars")
// a group for each stack of bars, positioned in the correct x position
.selectAll(".bar.stack")
.data(data)
.enter().append("g")
.attr("class", "bar stack")
.attr("transform", function(d) { return "translate(" + x(d.date) + ",0)"; })
// a bar for each value in the stack, positioned in the correct y positions
.selectAll("rect")
.data(function(d) { return d.total; })
.enter().append("rect")
.attr("class", "bar")
.attr("width", 6)
.attr("y", function(d) { return y(d.total); })
.attr("height", function(d) { return height - y(d.total) ;})
//console.log(data);
overview.append("g")
.attr("class", "bars")
.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xOverview(d.date) - 3; })
.attr("width", 6)
.attr("y", function(d) { return yOverview(d.total); })
.attr("height", function(d) { return heightOverview - yOverview(d.total); });
// add the brush target area on the overview chart
overview.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
// -6 is magic number to offset positions for styling/interaction to feel right
.attr("y", -6)
// need to manually set the height because the brush has
// no y scale, i.e. we should see the extent being marked
// over the full height of the overview chart
.attr("height", heightOverview + 7); // +7 is magic number for styling
});
// by habit, cleaning/parsing the data and return a new object to ensure/clarify data object structure
function parse(d) {
var value = { date: parseDate(d.Day) }; // turn the date string into a date object
// adding calculated data to each count in preparation for stacking
value.total = +d.Trips
return value;
}
// zooming/panning behaviour for overview chart
function brushed() {
// update the main chart's x axis data range
x.domain(brush.empty() ? xOverview.domain() : brush.extent());
// redraw the bars on the main chart
main.selectAll(".bar.stack")
.attr("transform", function(d) { return "translate(" + x(d.date) + ",0)"; })
// redraw the x axis of the main chart
main.select(".x.axis").call(xAxis);
}
</script>
</body>`
最佳答案
好的，结果是:https://plnkr.co/edit/ouXS42g8JRPfo4IRN66g?p=preview
我已将您的解析函数更改为
function parse(d) {
var value = { date: parseDate(d.Day) }; // turn the date string into a date object
// adding calculated data to each count in preparation for stacking
value.total = +d.Trips
value.counts = [{y0:0,y1:value.total}];
return value;
}
因为
.data(function(d) {return d.total; })
它期望 d.total 是一个数组，但事实并非如此。所以我用
更改了它.data(function(d) {return d.counts; })
我在解析函数中定义的。我相应地对高度和 y 进行了小调整:
.attr("y", function(d) {return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1);})
关于javascript - D3.js 栏未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36990422/