d3.js 如何通过特殊顺序将数据连接到SVG文本

mzmfm0qo 于 12个月前发布在其他

关注(0)|答案(1)|浏览(168)

我的数据就像

const data = [
  { name: 'Jane', age: 90 },
  { name: 'Paul', age: 20 },
  { name: 'Jerry', age: 32 },
  { name: 'Mary', age: 75 },
];

字符串
我的SVG就像

<svg>
  <g data-name='Jerry'><text>Jerry</text> <text>age</text> <text class='age'>0</text></g>  
  <g data-name='Paul'><text>Paul</text> <text>age</text> <text class='age'>0</text></g>
  <g data-name='Mary'><text>Mary</text> <text>age</text> <text class='age'>0</text></g>
  <g data-name='Jane'><text>Jane</text> <text>age</text> <text class='age'>0</text></g>
</svg>

型
正如上面所看到的，data和svg不是按名称排序的。
我想保留此顺序Jerry → Paul → Mary → Jane。但每次我尝试使用d3链接数据时，它都会以数据的顺序（jane → paul → jerry → mary）链接
我不知道如何按照svg的顺序连接数据。：（

const svg = d3.select('svg');
svg.selectAll('.age').data(data).text(function(d){return d.age})

型
有什么办法解决吗？有线索吗？
或者这可能不是使用d3的正确或适当的方式？：（
谢谢.

d3.js

来源：https://stackoverflow.com/questions/75743494/how-to-join-data-by-special-order-to-svg-text

1条答案

按热度按时间

yjghlzjz1#

绑定数据时需要使用key函数，但是这里有两个复杂的因素：
1.由于已经有了要绑定数据的元素，因此必须检查data中的unique属性和元素的data属性，因为在函数第一次运行时，元素没有绑定数据。

data属性在父元素中，而不是在元素本身中，因此需要使用parentNode：

.data(data, function(d) {
    return d ? d.name : this.parentNode.dataset.name
})

字符串
下面是包含key函数的代码：

const data = [{
    name: 'Jane',
    age: 90
  },
  {
    name: 'Paul',
    age: 20
  },
  {
    name: 'Jerry',
    age: 32
  },
  {
    name: 'Mary',
    age: 75
  },
];

const svg = d3.select('svg');
svg.selectAll('.age')
  .data(data, function(d) {
    return d ? d.name : this.parentNode.dataset.name
  })
  .text(function(d) {
    return d.age
  })

<svg>
  <g transform='translate(30,20)' data-name='Jerry'><text>Jerry</text> <text x="50">age</text> <text class='age' x="80">0</text></g>  
  <g transform='translate(30,40)' data-name='Paul'><text>Paul</text> <text x="50">age</text> <text class='age' x="80">0</text></g>
  <g transform='translate(30,60)' data-name='Mary'><text>Mary</text> <text x="50">age</text> <text class='age' x="80">0</text></g>
  <g transform='translate(30,80)' data-name='Jane'><text>Jane</text> <text x="50">age</text> <text class='age' x="80">0</text></g>
</svg>
<script src="https://d3js.org/d3.v7.min.js"></script>

的数据

赞(0）回复(0）举报 12个月前

我来回答

d3.js 如何通过特殊顺序将数据连接到SVG文本

1条答案

相关问题

热门标签

最新问答