javascript - 如何从 g 中选择特定元素并对其进行转换

我正在慢慢地完成在 d3 中构建第一个可视化的示例，现在我对如何在“g”分组中选择特定对象并以与其他对象不同的方式显示感到困惑。

您可以在这里看到我迄今为止的工作图表:

本质上，该图表旨在显示某些类型区域的平均售价，并通过选择开关在区域之间移动。

不幸的是，有两个问题我正在努力解决。

它当前在图表中显示为矩形。我如何选择最后一个“矩形”？

它应该开头:

d3.select("svg").selectAll("g")

但是由于没有“id”，我无法弄清楚如何选择最后一个。这是我应该添加的内容吗？

最佳答案

栏高度

条形高度差异的原因是因为您的 y 和高度的初始属性设置与更改处理程序中的设置不同

你在第一个

  .attr("y", function(d){
    return height - price_scale(d.value);
  })
  .attr("height", function(d) {
    return price_scale(d.value);
  })

以及后者

  .attr("y", function(d){
    return price_scale(d.value);
  })
  .attr("height", function(d) {
    return height - price_scale(d.value);
  })

交换 y 和高度的函数。如果你使它们相同，高度将保持不变

<小时/>

样式

使用 SVG 的好处是您可以使用 CSS 进行样式设置。如果您只想以不同的方式设置最后一个栏的样式，您可以使用

 svg rect:last-child {
    fill: red;
 }

请注意，当您有其他元素或多个图表时，您可能需要为您的 svg 元素设置一个 id 并为您的条形图设置一个类。

<小时/>

但是我假设您是在询问如何使用 d3 进行此操作。您可以使用相同的选择器

d3.select('svg rect:last-child').style('fill', 'red')

<小时/>

但是，如果您考虑以更多 d3 方式执行此操作，您可能希望实际使用数据模型来指示最后一个数据点是特殊的，并使用它来设计不同的样式。

这是我们使用特殊值“AVERAGE”来确定我们需要以不同方式设置条形图样式的一种方法(您可以改为向数据添加特殊属性)

...
.attr("fill", function(d) {
    if (d.street_split === 'AVERAGE')
        return 'red'
    else
        return "steelblue"
});

关于javascript - 如何从 g 中选择特定元素并对其进行转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32251212/