Question

我有一个d3条形图，可以在用户选择某些设置时对其条形图进行排序。我的问题是，当它开始自我排序并且鼠标在它们仍在自我排序时移动到条形图上时，条形图和触摸了＃34;鼠标停在它们的位置，它看起来像这样：

http://www.bilder-upload.eu/show.php?file=1dd214-1457697725.png

以下是我的代码的一部分：

var margin2 = {top: 50, right: 20, bottom: 30, left: 0},
width2 = 1750 - margin2.left - margin2.right,
height2 = 300 - margin2.top - margin2.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()
.rangeRoundBands([0, width2], .1, 1);

var y2 = d3.scale.linear()
.range([height2, 0]);

var xAxis2 = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis2 = d3.svg.axis()
.scale(y2)
.orient("left");
var yAxis22 = d3.svg.axis()
.scale(y2)
.orient("right");

var svg2 = d3.select("body").append("svg")
.attr("width", width2 + margin2.left + margin2.right)
.attr("height", height2 + margin2.top + margin2.bottom)
.append("g")
.attr("transform", "translate(" + margin2.left + "," + margin2.top +")");

然后在更新功能中，我擦除我想要更改的d3元素，然后再次显示它们，调用以下内容：

d3.csv(dataC, function(error, data) {
if (chan == true){


x.domain(data.map(function(d) { return d.letter; }));
y2.domain([0, d3.max(data, function(d) { return d.frequency; })]);


}   
svg2.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height2 + ")")
  .call(xAxis2);

svg2.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate("+""+width2+",0)")
  .call(yAxis2)
.append("text")
  .attr("transform", "rotate(0)")
  .attr("y2", 100)
  .attr("dy", ".71em")
  .style("text-anchor", "end");
svg2.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(10,0)")
  .call(yAxis22)
.append("text")
  .attr("transform", "rotate(90)")
  .attr("y2", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "front");
if (chan == true){
svg2.selectAll("rect")
  .data(data)
.enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.letter); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y2(d.frequency); })
  .attr("height", function(d) { return height2 - y2(d.frequency); })
  .on("click", function(d){
        getCountry(d);
    })
  .on("mouseover", function() {
      d3.select(this)
      .attr("fill", "orange");})
    .on("mouseout", function(d) {
      d3.select(this)
       .transition()
       .duration(550)
       .attr("fill", "rgb(0, 0, " + (d * 10) + ")");
    });

 d3.select("input").on("change", change);

 var sortTimeout = setTimeout(function() {
 d3.select("input").property("checked", true).each(change);
 }, 500) }
 function change() {
  clearTimeout(sortTimeout);

  if (chan == true){
  // Copy-on-write since tweens are evaluated after a delay.
  var x02 = x.domain(data.sort(this.checked
    ? function(a, b) { return b.frequency - a.frequency; }
    : function(a, b) { return d3.ascending(a.letter, b.letter); })
    .map(function(d) { return d.letter; }))
    .copy();

  svg2.selectAll("rect")
    .sort(function(a, b) { return x02(a.letter) - x02(b.letter); });

  var transition = svg2.transition().duration(750),
    delay = function(d, i) { return i * 10; };

  transition.selectAll("rect")
    .delay(delay)
    .attr("x", function(d) { return x02(d.letter); });

  transition.select(".x.axis")
    .call(xAxis2)
  .selectAll("g")
    .delay(delay);
  chan = false;
   }
  }
 });
 }

我猜是因为我有一个鼠标输入，我也有单选按钮使用鼠标输入，如：

<input type="radio" name="radio" id="radio2" class="radio"
onchange="headerChange('acco.csv')"/>
<label for="radio2">Accomodation</label>

有没有办法在条形码自动排序时停止鼠标输入，或者是否存在完全不同的问题？

提前感谢您的帮助！问候，佛罗伦萨

鼠标悬停停止d3栏移动

0 个答案: