[英]How to make a clickable transition bar graph in d3 v4?
How to make a clickable transition bar graph in d3 v4? 如何在d3 v4中制作可点击的过渡条形图?
Current code: 当前代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: A bar chart that transitions to new data!</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<p>Click on this text to update the chart with new data values (once).</p>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 250;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale = d3.scaleBand()
.rangeRound([0, w])
.padding(0.05);
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//On click, update with new data
d3.select("p")
.on("click", function() {
//New values for dataset
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25,
5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ];
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition() // <-- This makes it a smooth transition!
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Update all labels
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.band() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
});
</script>
</body>
</html>
Code above from: https://github.com/alignedleft/d3-book/blob/master/chapter_09/05_transition.html http://examples.oreilly.com/0636920026938/chapter_09/05_transition.html 上面的代码来自: https : //github.com/alignedleft/d3-book/blob/master/chapter_09/05_transition.html http://examples.oreilly.com/0636920026938/chapter_09/05_transition.html
I am getting errors after switching the code to v4. 将代码切换到v4后出现错误。 I fixed the errors I knew about but now I am getting these one errors in the JavaScript console:
我修复了我所知道的错误,但是现在我在JavaScript控制台中遇到了以下一个错误:
Error: attribute x: Expected length, "NaN". 错误:属性x:预期长度“ NaN”。
You are not setting the domain of the x scale: 您未设置x比例尺的域:
var xScale = d3.scaleBand()
.domain(d3.range(dataset.lengh))
.rangeRound([0, w])
.padding(0.1);
Also, pay attention to xScale.band()
, which doesn't exist: it should be xScale.bandwidth()
instead. 另外,请注意
xScale.band()
,它不存在:它应该是xScale.bandwidth()
。
Here is a working code, with the domain: 这是具有域的工作代码:
var w = 600; var h = 250; var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, w]) .padding(0.1); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, h]); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Create bars svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")"; }); //Create labels svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }) .attr("y", function(d) { return h - yScale(d) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); //On click, update with new data d3.select("p") .on("click", function() { //New values for dataset dataset = [11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10, 13, 19, 21, 25, 22, 18, 15, 13 ]; //Update all rects svg.selectAll("rect") .data(dataset) .transition() // <-- This makes it a smooth transition! .attr("y", function(d) { return h - yScale(d); }) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")"; }); //Update all labels svg.selectAll("text") .data(dataset) .text(function(d) { return d; }) .attr("y", function(d) { return h - yScale(d) + 14; }); });
<script src="https://d3js.org/d3.v4.min.js"></script> <p>Click on this text to update the chart with new data values (once).</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.