Question

我已将我的数据嵌套为'starting point'的密钥，并且我想使用每个密钥的值进行样式设置。

我为每个键创建了一个圆圈，并希望使用值'color'来填充它。我该如何访问？我尝试过很多东西，包括

.style("fill", function(d) {
    return d.values.color
})

和

.data(function(d) {return d.values})

但除非我绑定值数据，否则我似乎永远不会这样做。我该怎么办？

Plunker

var newdata = [{
  'starting point': 'Berkner',
  'color': '#0084B5',
  'path': 'M 210.256,185.116'
}, {
  'starting point': 'Hercules',
  'color': '#E48428',
  'path': 'M 156.355,241.624'
}, {
  'starting point': 'Ronne',
  'color': '#009079',
  'path': 'M 195.123,218.287'
}, {
  'starting point': 'Ronne-Filchner',
  'color': '#D81D1F',
  'path': 'M 195.123,218.287'
}, {
  'starting point': 'Hut',
  'color': '#DB2882',
  'path': 'M 332.640,380.314'
}];


var startingpoint = d3.nest()
  .key(function(d) {
  return d['starting point'];
  })
  .entries(newdata);

console.log(startingpoint)

var canvas = d3.select('#routes')
  .append('svg')
  .attr("viewBox", "0 0 700 500")
  .attr('width', "100%")
  .attr('height', "100%")
  .attr('x', 0)
  .attr('y', 0)

var posEnter = canvas
  .selectAll(".route")
  .data(startingpoint)
  .enter().append("g")
  .attr('class', 'route')
  .attr('transform', 'translate(0,30)')
  .text(function(d) {
    return d.key
  })

posEnter
  .append("circle")
  .attr('class', 'routemark')
  .attr('r', '10')

posEnter.select('.routemark')
  .attr('cx', '10')
  .attr('cy', function(d, i) {
    return i * 30
  })
  .style("fill", function(d) {
    return d.values.color
  })

Answer 1

通过应用d3.nest()创建的对象将具有属性values，这是一个数组：

[
  {
    "key": "Berkner",
    "values": [
      {
        "starting point": "Berkner",
        "color": "#0084B5",
        "path": "M 210.256,185.116"
      }
    ]
  },

请参阅此代码段以获取示例：

＆＃13;

var newdata = [{
  'starting point': 'Berkner',
  'color': '#0084B5',
  'path': 'M 210.256,185.116'
}, {
  'starting point': 'Hercules',
  'color': '#E48428',
  'path': 'M 156.355,241.624'
}, {
  'starting point': 'Ronne',
  'color': '#009079',
  'path': 'M 195.123,218.287'
}, {
  'starting point': 'Ronne-Filchner',
  'color': '#D81D1F',
  'path': 'M 195.123,218.287'
}, {
  'starting point': 'Hut',
  'color': '#DB2882',
  'path': 'M 332.640,380.314'
}];


var startingpoint = d3.nest()
  .key(function(d) {
  return d['starting point'];
  })
  .entries(newdata);
  
// Just output below
d3.select("#print")
  .text("startingpoint = \n" + JSON.stringify(startingpoint, null, "  "));
console.log(startingpoint)

＆＃13;

div {
  white-space: pre;
  font-family: monospace;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="print"></div>

＆＃13;

对于您的代码，解决方案应该像这样简单：

.style("fill", function(d) {
  return d.values[0].color;   // access the array to get the first element's color
})

D3如何使用嵌套值设置键的样式

1 个答案: