我对 D3、javascript 和 Stackoverflow 有点陌生，我正在尝试使多个 onclick 事件可用于条形图。更具体地说，我想让图表中的条形变高一点，然后在单击其他地方后能够变得更高。到目前为止，以下是我的代码。最终，我还希望能够使条形按升序重新排列，因为它们按升序排列，我通过单击第一个列表子项来触发。我尝试在点击事件上添加更多内容。为第二个或第三个孩子复制我为第一个列表孩子输入的内容并没有什么坏处，但是当我尝试制作实际的相应变量时，它会把事情搞砸，svg 甚至没有显示。我应该以不同于升序的方式构建变量吗？
<!DOCTYPE html>
<html>
<head>
<style>
svg {
margin-left:25%;
}
rect:hover {
fill:red;
fill-opacity:1.0;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<ul>
<li>Ascending</li>
<li>Grow</li>
<li>Grow More</li>
<li>Back to Normal Size</li>
</ul>
<script>
//Width and height
var h = 250;
var nh = 250;
var w = 500;
var barPadding = 5;
var dataset = [
5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25];
var o = d3.scale.linear()
.domain([25,0])
.range ([.25,.75])
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h - 150]); //the higher the number subtracted the shorter the bars are
var yScale2 = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h - 100]);
var yScale3 = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h - 50]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d) + 3; //adding a number makes the bar chart go up
})
//code below is supposed to make bar width dependent on data value.
.attr("width", function(d) {return d - 2; }) //xScale.rangeBand()
.attr("height", function(d) {
return yScale(d);
})
.attr("fill","rgb(0,0,200)")
.attr("fill-opacity", function(d) {return o (d)})
d3.select("li:nth-child(1)")
.on("click", function() {
asCend();
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {return d;})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d)
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
var asCend = function() {
svg.selectAll("rect")
.sort(function(a, b) {
return d3.ascending(a, b);
})
.transition()
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
})//;
svg.selectAll("text")
.sort(function(a, b) {
return d3.ascending(a, b);
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
};
</script>
</body>
</html>