访问使用 D3 制作的 SVG 的属性

Question

我正在 d3 中制作一个简单的条形图，想为几只狗的身高绘制条形图，并希望在条形图上方有一个小点来指示体重。以下代码运行良好，并创建了所需的条并定位到位。

const svg = d3.select('.chartArea').append('svg')
    .attr('height' , 500)
    .attr('width' , 600); 

const heightBars = svg.selectAll('rect')
    .data(dogs)

heightBars.enter().append('rect')
    .attr('width' , 40)
    .attr('height' , (d) => y(d.height))
    .attr('y' , (d) => 500- y(d.height) )
    .attr('x',  (d,i) => (60*i))
    .attr('fill' , (d) => d.color)
    .attr('id', (d) => d.name)

我想使用我已经制作的条的坐标来制作圆圈，但我发现很难访问 6 个矩形的属性。如您所见，我已经为他们提供了所有 ID，但在尝试检查运行行时：

console.log(d3.select('#labrador').attr('y'))

我收到错误 Uncaught TypeError: Cannot read 属性 'getAttribute' of null

如何访问我使用 d3 制作的 svg 的属性？

谢谢:)

编辑

我设法将以下有效但非常丑陋的方法结合在一起：

weightDots.enter().append('circle')
.attr('cx' , (d) => parseInt(d3.select('.'+ d.name).attr('x')) +20  )
.attr('cy' ,  (d) =>  400-yW(d.weight) )
.attr('r' , 10)
.attr('fill' , (d) => d.color)

Answer 1

您可以使用相同的数据使用另一个输入追加，例如这样的东西。（我没有添加颜色或 ID，但第一部分是您的代码）

dogs=[
{
  height: 54,
  weight: 3,
},
{
  height: 34,
  weight: 3
},
{
  height: 84,
  weight: 3
}
]

const svg = d3.select('.chartArea').append('svg')
    .attr('height' , 500)
    .attr('width' , 600); 

const heightBars = svg.selectAll('rect')
    .data(dogs)

heightBars.enter().append('rect')
    .attr('width' , 40)
    .attr('height' , (d) => d.height)
    .attr('y' , (d) => 500 - d.height)
    .attr('x',  (d,i) => (60*i))
    
svg.selectAll('circle')
  .data(dogs)
  .enter().append('circle')
  .attr('cy', d => 475 - d.height)
  .attr('cx', (d,i) => 60*i + 20) // 1/2 bar width offset
  .attr('r', 10)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="chartArea"></div>

访问使用 D3 制作的 SVG 的属性

Accessing properties of SVGs made using D3

javascript

svg

d3.js