D3转换不工作 [英] D3 transitions not working

问题描述

我有一个问题，让我的过渡在数据集之间工作。我希望数字，矩形和名称在按钮被点击时平滑过渡，但目前他们只是跳跃。

I'm having an issue getting my transitions to work between datasets. I would like the numbers, rectangles and names to smoothly transition between eachother when the button is clicked, but at present they only jump.

我使用他们像这样

players.select('.saves')
 .transition().duration(200)
 .attr('y', function(d, i) {
         return i * (h / data.length);
 })
 .attr('width', function(d) {
      return Scale(d['saves']) ;});

我的选择有问题吗？

https://jsfiddle.net/8voee4fm/1/

<button class="opts champ" value="championsleague">Champions League</button>
<button class="opts prem" value="premierleague">Premier League</button>

<div id="chart"></div>

var w = 300, h = 300;
var barHeight = 20;

var data = 

championsleague = [{
    "name": "Hart",
    "saves": "9",
    "total": "15",
  }, {
    "name": "Subasic",
    "saves": "6",
    "total": "10"
  }, {
    "name": "Neuer",
    "saves": "5",
    "total": "9"
  },{
    "name": "Olsen",
    "saves": "9",
    "total": "18"
  }, ];

premierleague = [{
  "name": "Hart",
  "saves": "12",
  "total": "27"
}, {
  "name": "Forster",
  "saves": "13",
  "total": "22"
}, {
  "name": "De Gea",
  "saves": "17",
  "total": "29"
}, {
  "name": "Green",
  "saves": "21",
  "total": "39"
},];

data.forEach(function(d){
  d.saves = +d.saves;
  d.total = +d.total;
});

var canvas = d3.select('#chart')
.append('svg')
.attr('width', w)
.attr('height', h)
.append('g')
.attr("transform", "translate(10,30)");

var Scale = d3.scale.linear().domain([0, 39]).range([0, w]);

function updateLegend(data) {

var players = canvas
 .selectAll(".player")
  .data(data, function(d){
   // always create a unique key for your data-binding
     return d.name + d.saves + d.total;
  });

var playersEnter = players
 .enter()
 .append("g")
 .attr("class", "player");

playersEnter.append('rect')
  .attr('class','total')
  .style("fill", "#abcbc0")
  .attr('x', 0)
  .attr('height',  barHeight);
playersEnter.append('text')
  .attr('class','totaln')
  .style("fill", "black")
  .style("text-anchor", "right");
playersEnter.append('rect')
  .attr('class','saves')
  .style("fill", "#008c6c")
  .attr('x', 0)
  .attr('height',  barHeight);
playersEnter.append('text')
  .attr('class','savesn')
  .style("text-anchor", "right")
  .style("fill", "white");
playersEnter.append('text')
  .attr('class','name')
  .attr('x', 0);

players.select('.total').transition()
  .duration(200)
  .attr('y', function(d, i) {
    return i * (h / data.length)
  })
  .attr('width', function(d) {
        return Scale(d['total']) 
  })
  .attr('height',  barHeight);

players.select('.totaln').transition()
 .duration(200).text(function(d) {
      return d.total;
 })
 .attr('x', function(d) {
      return Scale(d['total']) -20})
 .attr('y', function(d,i) {
       return i * (h / data.length ) +15
 });

players.select('.saves')
 .transition().duration(200)
 .attr('y', function(d, i) {
         return i * (h / data.length);
 })
 .attr('width', function(d) {
      return Scale(d['saves']) ;});

players.select('.savesn')
 .transition()
 .duration(200).text(function(d) {
      return d.saves;
  })
 .attr('x', function(d) {
      return Scale(d['saves']) -18})
 .attr('y', function(d,i) {
        return i * (h / data.length ) +15
 });

  players.select('.name')
    .transition().duration(200)
    .text(function(d) {
      return d.name;
    })
    .attr('y', function(d, i) {
         return i * (h / data.length) -10
    });

 // remove old elements
 players.exit().remove();

};

    updateLegend(data);

    d3.selectAll('.opts')
    .on('click', function() {
    var data = eval(d3.select(this).property('value'));
    console.log(data)
    updateLegend(data);
  })

推荐答案

您只需更正一行代码：

而不是

 var players = canvas
 .selectAll(".player")
  .data(data, function(d){
   // always create a unique key for your data-binding
     return d.name + d.saves + d.total;
  });

您写：

 var players = canvas
 .selectAll(".player")
  .data(data);

现在可以了。
问题如下：您在输入选择中创建的DOM元素不是有效的SVG元素，因为至少缺少一个属性（例如，rect的宽度缺失）。因此，转换创建了对象（来自不足的SVG对象）。

Now it works. The problem was the following: The DOM elements you create in the enter selection are not valid SVG elements since at least one attribute was missing (E.g. the width is missing for the rect). As a result the transition created the object (from an underspecified SVG object).

现在除了初始显示之外，所有的转换都是由于上述原因。

So now you have transitions for all but the initial display because of the reason described above.

这是工作的JSFiddle：
https： //jsfiddle.net/ee2todev/xjf0k2oy/

Here's the working JSFiddle: https://jsfiddle.net/ee2todev/xjf0k2oy/

这篇关于D3转换不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！