D3.js D3-多个onclick事件
我对D3、javascript和Stackoverflow有点陌生，我正在尝试使多个onclick事件对条形图有效。更具体地说，我想让图表中的条形图变得更高一点，然后在单击其他位置后能够变得更高。下面是到目前为止我的代码。最后，我还希望能够使这些条按照升序重新排列，我通过单击第一个子列表来触发升序。我尝试过在点击事件中添加更多内容。将我为第一个列表子项输入的内容复制到第二个或第三个子项中不会有任何影响，但是当我尝试生成实际的对应变量时，它会把事情搞砸，svg甚至不会显示出来。我应该用不同于升序的方式构造变量吗D3.js D3-多个onclick事件,d3.js,D3.js,我对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>
svg{
左边缘：25%；
}
矩形：悬停{
填充物：红色；
填充不透明度：1.0；
}
- 上升的
- 成长
- 长得更多
- 恢复正常尺寸
//宽度和高度
var h=250；
var nh=250；
var w=500；
var=5；
变量数据集=[
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]）
.范围（[.25，.75]）
var xScale=d3.scale.ordinal（）
.domain（d3.range（dataset.length））
.范围圆带（[0，w]，0.05）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（数据集）]）
.范围（[0，h-150]）//减去的数字越高，条越短
var yScale2=d3.scale.linear（）
.domain（[0，d3.max（数据集）]）
.范围（[0，h-100]）；
var yScale3=d3.scale.linear（）
.domain（[0，d3.max（数据集）]）
.范围（[0，h-50]）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“rect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{
返回xScale（i）；
})
.attr（“y”，函数（d）{
返回h-yScale（d）+3；//添加一个数字会使条形图上升
})
//下面的代码应该使条形宽度取决于数据值。
.attr（“宽度”，函数（d）{return d-2；}）//xScale.rangeBand（）
.attr（“高度”，功能（d）{
返回yScale（d）；
})
.attr（“填充”、“rgb（0,0200）”）
.attr（“填充不透明度”，函数（d）{return o（d）}）
d3.选择（“li:n个子项（1）”）
.on（“单击”，函数（）{
上升（）；
});
svg.selectAll（“文本”）
.数据（数据集）
.输入（）
.append（“文本”）
.text（函数（d）{return d；}）
.attr（“x”，函数（d，i）{
返回xScale（i）+xScale.rangeBand（）/2；
})
.attr（“y”，函数（d）{
返回h-yScale（d）
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“红色”）；
var asCend=函数（）{
svg.selectAll（“rect”）
.排序（功能（a、b）{
返回d3.升序（a，b）；
})
.transition（）
.持续时间（1000）
.attr（“x”，函数（d，i）{
返回xScale（i）；
})//;
svg.selectAll（“文本”）
.sort（函数（a，b）{
返回d3.升序（a，b）；
})
.transition（）
.延迟（功能（d，i）{
返回i*50；
})
.持续时间（1000）
.attr（“x”，函数（d，i）{
返回xScale（i）；
});
};