Question

我正在使用迈克博斯托克世界巡回赛地图visualization，我想做一些修改。

1）我想在显示最后一个国家后重播动画。

2）没有按名称DESC排序，我想通过tsv文件中的行号来定义顺序。

我尝试在转换过程中添加重播功能，但没有运气，我似乎无法真正理解它是如何工作的，所以我需要一些帮助。

var SliderContainer = React.createClass({

getInitialState() {
return {
  value: DEFAULT_VALUE,
};
},

render() {
var value = this.state.value;

return (
  <View>
  <Text style={{fontSize:15, fontFamily:'Bradley Hand'}}> Distortion </Text>

    {this.renderChildren()}
  </View>
);
},

renderChildren() {
return React.Children.map(this.props.children, (child) => {
  if (child.type === Slider
      || child.type === ReactNative.Slider) {
    var value = this.state.value;
    return React.cloneElement(child, {
      value: value,
      onValueChange: (val) => this.setState({value: val}),
    });
  } else {
    return child;
  }
});
},
});

Answer 1

bl.ock中的原始代码实际上重复了（虽然我还没有真正看到过这个）。显示的国家/地区位于以下部分：

title.text(countries[i = (i + 1) % n].name);

允许列表重复。但是，n由地理要素的数量而不是TSV中的条目数定义。如果你想访问每个国家，这是伟大的，但如果你想访问一些国家则不太好。因此，您可以将n重新定义为：

 n = names.length;

至于排序，如果你只想删除按字母顺序排序，你应该可以删掉。

 .sort(function(a, b) {
return a.name.localeCompare(b.name)

但是，现在默认的显示顺序将是世界json中的功能顺序。为了改变这种情况，我尝试应用＆＃34;命令＆＃34;列到TSV并将该值应用于排序：

countries = countries.filter(function(d) {
return names.some(function(n) {
   if (d.id == n.id) { return  [d.order = n.order, d.name = n.name] }
   })
}).sort(function(a, b) {
   return +a.order - +b.order; 
});

这使用名为＆＃34; order＆＃34;的TSV列，但可能会有更优雅的方法使用行号。

同样重要的是要注意TSV中的初始条目（标有负数的条目）不作为地图上的要素存在，因此不在任何自定义TSV中使用它们是明智的。

我认为问题中引用的bl.ock可能会在萨摩亚停止，从最后开始是第三，因为我在测试此解决方案时遇到了一些困难，删除它解决了这个问题。它可能不是世界json中的一个特征。所以可能还有其他一些会导致打嗝。

示例：Custom World Tour (bl.ocks.org)

循环过渡并按给定顺序显示国家/地区

1 个答案: