显示条形图的原始和更新数据
Display original and updated data of the bar chart
我试图修改在其中一个网站上发现的以下代码,以显示图中原始和更新的数据。我希望更新的数据是在不同的颜色,仍然显示原始数据,看到变化。谁能告诉我错误在哪里?
<title>d3 example</title>
<style>
.original{
fill: rgb(7, 130, 180);
}
.updated{
fill: rgb(7,200,200);
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script type="text/javascript">
// Suppose there is currently one div with id "d3TutoGraphContainer" in the DOM
// We append a 600x300 empty SVG container in the div
var chart = d3.select("#d3TutoGraphContainer").append("svg").attr("width", "600").attr("height", "300");
// Create the bar chart which consists of ten SVG rectangles, one for each piece of data
var rects = chart.selectAll('rect').data([1 ,4, 5, 6, 24, 8, 12, 1, 1, 20])
.enter().append('rect')
.attr("stroke", "none")
//.attr("fill", "rgb(7, 130, 180)")
.attr('class','original')
.attr("x", 0)
.attr("y", function(d, i) { return 25 * i; } )
.attr("width", function(d) { return 20 * d; } )
.attr("height", "20");
// Transition on click managed by jQuery
rects.on('click', function() {
// Generate randomly a data set with 10 elements
var newData = [1,2,3,4];
//for (var i=0; i<10; i+=1) { newData.push(Math.floor(24 * Math.random())); }
var newRects = d3.selectAll('rects.original');
newRects.data(newData)
.transition().duration(2000).delay(200)
.attr("width", function(d) { return d * 20; } )
//.attr("fill", newColor);
.attr('class','updated');
});
</script>
我想知道是否可以使用d3.selectAll('rects.original')控制原始数据
如果选择"rects. "并将数据绑定到它,您将创建一个带有Update、Exit和Enter选项的连接。我不确定我完全理解你想要实现什么,但如果你想要独立于旧矩形和数据绘制新数据,你必须为它创建一个新的选择:
var newRects = chart.selectAll("rect.new")
.data(newData)
.enter()
(...)
并画出来。注意,SVG中的重叠意味着底层元素将不再显示。
我不确定你所说的"对原始数据的控制"是什么意思,它仍然绑定到你绑定它的选择。如果您想要修改它,您必须修改数据,重新绑定它,然后在更新选择上应用转换。
相关文章:
- 更新数据,而不是用javascript和jquery将其添加到我的表中
- JQGrid使用服务器编辑后的更新数据刷新数据
- 使用odata 4的jaydata 1.5和保存/更新数据时的错误
- 使用引导时间选取器时,没有更新数据ng模型值
- AngularJS中超时后没有更新数据
- jQuery动态更新数据键和值
- 在简单的可重用 D3 图表中更新数据
- Node/Express 无法正确更新数据模型
- 如何在jQuery中的单个保存按钮上更新数据和添加数据
- 如何使用Jquery更新数据确认属性中的消息
- 更新数据后保留D3图的位置
- 使用$watch更新数据,ng重复不反映更改
- 在OpenCart中,我们如何实时更新数据
- 表单在每个页面中 - 仅在特定页面上处理它 - 如果当前不在页面上 - 重定向 - 否则 - 使用 AJAX 更新数据
- 调整窗口大小时更新数据属性
- Firebase赢得't更新数据
- Rails和jQuery-尝试使用setTimeout主动更新数据
- Lawnchair.js未更新数据
- 更新数据时的React.js生命周期
- enter() 和 exit() 如何检测 D3 中的更新数据