我有这样的D3 SVG条形图:D3将鼠标悬停在更改数据更改时
http://tinyurl.com/cul7oyg
在右下方(您需要向下滚动)。您可以将鼠标悬停在酒吧上,没有任何问题。但是,点击左上角框底部的链接后,我会创建一个包含新数据的新条形图。鼠标悬停现在只能在鼠标悬停在条形之间的线条上时才起作用。我所做的所有链接都是使用下面的命令清空div的内容:(d3.select(“#barchart”)。html(“”),然后传入一个新的小数据集到这个函数中,数据是一个数组对象。
function generateBarForData(data) {
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 750 - margin.left - margin.right,
height = data.length * 20 //500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width*.85])
//chart1.x =x
//chart1.y = y
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], 0);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top");
var svg = d3.select("#barchart").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) {
x.domain(d3.extent(data, function(d) { return +d.netdonations_over_population_to_gdppercap_percentage; })).nice();
y.domain(data.map(function(d) { return d.name; }));
bar = svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", function(d) { return +d.netdonations_over_population_to_gdppercap_percentage <= 0 ? ("bar negative " + d.name) : ("bar positive " + d.name); })
.attr("x", function(d) { return x(Math.min(0, +d.netdonations_over_population_to_gdppercap_percentage)); })
.attr("y", function(d) { return y(d.name); })
.attr("width", function(d) { return Math.abs(x(+d.netdonations_over_population_to_gdppercap_percentage) - x(0)); })
.attr("height", y.rangeBand()).on('mouseover', function(d,i) {
//barChartSelectOneCountry(this) //rect
selectBarChartCountryWithClear(d, this) //mouseover(d)
}).style("stroke","white")
chart1.svg = svg
chart1.x = x
chart1.y = y
svg.selectAll("text")
.data(data)
.enter().append("text").text(function(d) {
return d;
}).attr("class", function(d) {return +d.netdonations_over_population_to_gdppercap_percentage <= 0 ? "recipient" : "donor"})
.attr("y", function(d, i) {
return y(d.name)+ y.rangeBand();
//return i * (height/data.length)+30;
}).attr("x", function(d) {
return x(0) //x(Math.min(0, +d.netdonations_over_population_to_gdppercap_percentage));
}).text(function(d) {
//return y(d) + y.rangeBand()/2;
return d.name + " " + d.netdonations_over_population_to_gdppercap_percentage;
}).style("font-size","14px").attr("dx", 3).attr("dy", "-0.45em")
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("x1", x(0))
.attr("x2", x(0))
.attr("y2", height);
}
“鼠标悬停现在仅能得到控制而徘徊在酒吧之间的线上“。它更新非常缓慢,但作出反应将鼠标悬停在栏上(将图形更改为“无捐助国”之后 - 绿线) – widged 2013-04-29 01:16:03
如果将鼠标悬停在文本上,它不起作用。查看指针事件属性http://themousepotatowebsite.co.za/pointer-events-none/ – widged 2013-04-29 01:17:59