D3 - 初始化后第一个转换的问题 [英] D3 - issues on first transition after initialization

问题描述

我创建了此jsbin http://jsbin.com/ibewux/3/edit 在转换时显示一个奇怪的行为。

当图表初始化时，它正确显示数据（见下表）。

如果我尝试通过下拉菜单更改图表类型，一些系列被交换;

同样的事情发生，如果你点击updateChartData按钮;第一次它将交换系列与表中显示的数据相比。

因此，似乎只有初始化后的第一个转换受到这种不必要的交换。 p>

这是一小段代码，想知道是否可以找出发生这种情况的原因。

谢谢

解决方案

当 isVerticalChart 为true时， c $ c> svg.pointsNames （似乎是Col+ i 形式的字符串数组）：

  x = d3.scale.ordinal（）。domain（svg.pointsNames）;但是，然后，继续使用具有此刻度的基准索引，而不是这些字符串： 
    / p> 
 
 
  .attr（x，function（d，i）{return isVerticalChart？x（i）：x -  d.size）;}）
  
 
 
我想你应该传递一个字符串从域到
目前只有工作，因为如果你将一个键传递到一个有序的刻度
 
 
 
可能还有其他问题，但希望能让您更接近。
 
I have created this jsbin http://jsbin.com/ibewux/3/edit to show a strange behavior on transitions.

When the chart is initialized, it correctly displays the data (see the table below it).

If I try to change the chart type through the dropdown menu, some series are swapped; after this happens, the series are not swapped anymore.

Same thing happens if you click on updateChartData button; first time it will swap the series compared to the data displayed in the table.

So it seems that only the first transition after initialization is subject to this unwanted swap.

It's a short piece of code and wonder if you can spot the reason why this happens.

Thanks
解决方案
When isVerticalChart is true, you are using an ordinal scale with domain svg.pointsNames (which seems to be an array of strings of the form "Col " + i):
x = d3.scale.ordinal().domain(svg.pointsNames);
However, you then go on to use the datum index with this scale, instead of these strings:
.attr("x", function(d, i) { return isVerticalChart ? x(i) : x(d.y0 - d.size); })
I think you should be passing a string from the domain to the scale here to avoid the strange behaviour you're seeing.

It only works at the moment because if you pass a key to an ordinal scale that hasn't been seen before, it will add it to the domain.

There may be other issues, but hopefully that gets you closer.

                        
这篇关于D3  - 初始化后第一个转换的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！