无法用颜色阈值填充圆形背景答案

【问题标题】：Can't fill circle background with color threshold无法用颜色阈值填充圆形背景
【发布时间】：2015-07-27 12:09:50
【问题描述】：

我尝试在地图上为特定数据集显示圆圈。数据集提供了圆的中心位置。数据集包含一个标识符（属性name）、年份（属性year）和一个值（属性value）

我想在这个级别显示两件事：

根据值圆的半径
根据年份和使用阈值的圆的背景颜色（填充）
单击圆圈时的工具提示。

这是我使用的代码：

var circle = d3.geo.circle();
var color = d3.scale.threshold()
  .domain([ 1800, 1850, 1900, 1950, 2000, 2050 ])
  .range("#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f");

var elements = layerElement.selectAll('circle')
      .data(data)
      .enter()
      .append('path')
      .attr('id', function(d) {
        return d.name;
      });

elements
      .datum(function(d) {
        return circle
           .origin(origin({d: d}))
           .angle(radius({d: d}))();
      })
      .attr('class', 'point')
      .attr('d', path)
      .style('fill', function(d) {
        return color(d.year);
      })
      .style('opacity', '0.6');

elements.on('click', function(d) {
    (...)
});

我为每个圆圈设置了一个标识符。我在内存中的 SVG DOM 中看到了它们：

<path id="Hoba"
      class="point" 
      d="M488.55415440889976,286.8579825670507L488.45185788883936,284.8328597859807L488.56757478032006,282.785303550314L488.90003726486356,280.73774731464727L489.445602813917,278.71262453357724L490.1982940971579,276.7321228760774L491.14986447137636,274.8179411327541L492.2898883324236,272.99105147935524L493.6058753403125,271.2714697012249L495.0834072659968,269.6780358961697L496.7062959605052,268.2282080584055L498.45676071568937,266.9378708051187L500.3156230733832,265.82116134127676L502.2625169486039,264.890314569452...L508.2862800372698,302.266499816963L506.206659850514,302.3738076922315L504.15052774957604,302.26649981696306L502.14041114802717,301.9457518786948L500.19833330399786,301.41507805895924L498.3455720287532,300.680292531176L496.6024265625401,299.74944575935126L494.9879951718629,298.63273629550935L493.5199659048794,297.34239904222255L492.2144227974436,295.8925712044583L491.08566965304294,294.2991373994032L490.1460733273343,292.5795556212728L489.4059282342853,290.752665967874L488.8733435584207,288.8384842245506Z"
      style="fill: yellow; opacity: 0.75;">

我的问题是：

在函数attr 中，第一个参数对应于选定的形状，但其中没有标识符。这是我得到的内容：
```
{"type":"Polygon","coordinates":[[[5.279833759995999,-21.628058088269754],(...)[5.525725679844768,-22.85403683844725],[5.279833759996005,-21.628058088269807]]]}
```
所以我无法获取相应的值来应用背景颜色
点击元素时遇到同样的问题

我的问题是如何获取所选元素的标识符（在我的例子中为圆形）。

非常感谢您的帮助！蒂埃里

【问题讨论】：

标签： d3.js svg maps

【解决方案1】：

您对datum 的调用正在从每个数据项生成一个路径，但丢弃了其余部分，包括属性。如果要保留属性，请嵌套它生成的对象：

  .datum(function(d) {
    return {
       circle: circle
         .origin(origin({d: d}))
         .angle(radius({d: d}))(),
       d: d
    };
  })

然后您的其余电话将随之而来：like

.attr('d', function(d) { return path(d.circle); })

和

  .style('fill', function(d) {
    return color(d.d.year);
  })

【讨论】：