Question

我用d3.js创建了一个小的多重映射。每个倍数都是一个不同的国家，在我的csv中标记为出口商。我有11个出口国：加拿大，俄罗斯，美国，意大利，法国，英国，巴西，中国，印度，德国和日本。

我想填写每个国家/地区，但前提是它是代表该倍数的国家/地区。所以每个国家只填充一个国家。

你可以在这里查看我的bl.ock。该倍数的国家（出口商）是线汇合的地方：https://bl.ocks.org/JulienAssouline/f899e2d6927aea6be65a109854b6f88a

现在我只为每一个人填写了美国。我填写了这段代码：

particleSystem.Simulate(Time.unscaledDeltaTime, true, false);

这显然是错误的，但我不确定如何按每个多个填充每个出口国。

以下是我的所有代码：

svg.selectAll(".country")
            .data(countries)
            .enter()
            .append("path")
            .attr("class", "country")
            .attr("fill", function(d){
              if(d.properties.name == "United States"){
                return "red"
              } else {
                return "#eeedeb"
              }
            })
            .attr("d", path)
            .attr("opacity", function(d){
              if(d.properties.name == "United States"){
                return 0.4
              } else {
                return 1
              }
            })

我的数据以及我使用的Topojson文件可以在我的公开要点中找到：https://gist.github.com/JulienAssouline/f899e2d6927aea6be65a109854b6f88a

Answer 1

在输入子元素时访问父元素的数据可能是一个挑战。但是，有几种方法可以实现这一目标。

一种方法是设置父元素的属性：

.property("exporter",function(d) { return d.key; });

这将为您追加的每个svg设置一个属性 - 因为基准键属性是国家/地区名称，我们可以在追加数据时使用此属性为国家/地区着色：

.attr("fill", function(d) {
    if(d.properties.name == d3.select(this.parentNode).property("exporter")){
...

或者，我们可以使用d3.local（）。顺便提一下，API documentation建议使用小倍数：

D3 locals允许您定义独立于数据的本地状态。对于例如，当你渲染小倍数的时间序列数据时对于所有图表可能需要相同的x比例，但是对于不同的y比例比较每个指标的相对表现。

尽管如此，它还指出：＆＃34;如果您只是设置一个变量，请考虑使用selection.property＆＃34;，这是上面介绍的方法。

要遵循第二种方法，您需要声明一个局部变量：

var local = d3.local();

在附加svgs时设置它：

.each(function(d) { local.set(this, d.key); })

然后在着色时得到它：

.attr("fill",function(d) {     
    if(d.properties.name == local.get(this)) {
      return "red";
    ...

Here's第二种方法的更新区块（评论中的第一种方法）。

Answer 2

最简单的替代方法是获取父元素的基准：

_start

以下是更新的bl.ocks：{{3}}

d3.js小倍数地图，每个倍数都有不同的填充国家

2 个答案: