我正在尝试从 JSON 数据创建条形图。我尝试按照示例 D3.js bar chart但我的图表仅显示六个 x 点中的两个，并且一些条形图堆叠在图表后面。 JSON 如下所示:
{"archive": [{"total_size": 13699.2, "source": "archive", "number_of_files": 136734813.0, "number_of_files_transferred": 153214.0},
{"total_size": 13209.57, "source": "gps", "number_of_files": 133545394.0, "number_of_files_transferred": 150179.0},
{"total_size": 86.94, "source": "doris", "number_of_files": 159744.0, "number_of_files_transferred": 183.0
{"total_size": 298.49, "source": "slr", "number_of_files": 1439700.0, "number_of_files_transferred": 704.0},
{"total_size": 212.71, "source": "vlbi", "number_of_files": 674539.0, "number_of_files_transferred": 134.0}
{"total_size": 27.81, "source": "glonass", "number_of_files": 319432.0, "number_of_files_transferred": 20.0}]}
(注意以上只是字典中的众多内容之一)
JavaScript 代码:
d3.json("{% url "graphs" %}", function(error, data) {
if (error) throw error;
x.domain(d3.extent(data['archive'], function(d) { return d.source; }));
y.domain([0, d3.max(data['archive'], function(d) { return d.total_size; })]);
var xvals = function(d) { return d.source };
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("GB");
svg.selectAll(".bar")
.data(data['archive'])
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.source); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.total_size); })
.attr("height", function(d) { return height - y(d.total_size); });
});
最佳答案
您不正确地使用 d3.extent 在 x 刻度上设置域。来自 docs ，它返回数据的最小值/最大值，这对于序数比例是不合适的。相反，请尝试:
x.domain(data["archive"].map(function(d) { return d.source; }));
完整的工作代码；
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//d3.tsv("data.tsv", type, function(error, data) {
// if (error) throw error;
var data = {
"archive": [{
"total_size": 13699.2,
"source": "archive",
"number_of_files": 136734813.0,
"number_of_files_transferred": 153214.0
}, {
"total_size": 13209.57,
"source": "gps",
"number_of_files": 133545394.0,
"number_of_files_transferred": 150179.0
}, {
"total_size": 86.94,
"source": "doris",
"number_of_files": 159744.0,
"number_of_files_transferred": 183.0
}, {
"total_size": 298.49,
"source": "slr",
"number_of_files": 1439700.0,
"number_of_files_transferred": 704.0
}, {
"total_size": 212.71,
"source": "vlbi",
"number_of_files": 674539.0,
"number_of_files_transferred": 134.0
},{
"total_size": 27.81,
"source": "glonass",
"number_of_files": 319432.0,
"number_of_files_transferred": 20.0
}]
};
x.domain(data["archive"].map(function(d) { return d.source; }));
y.domain([0, d3.max(data['archive'], function(d) {
return d.total_size;
})]);
var xvals = function(d) {
return d.source
};
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("GB");
svg.selectAll(".bar")
.data(data['archive'])
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.source);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.total_size);
})
.attr("height", function(d) {
return height - y(d.total_size);
});
//});
</script>关于javascript - 使用 json 的 d3.js 中的不完整图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33636043/