d3如何从g中选择特定元素并转换i

Question

我正在慢慢地完成一个在d3中建立我的第一个可视化效果的例子，现在我正纠结于如何在一个“g”分组中选择一个特定的对象，并以与其他对象不同的方式显示。在

到目前为止，你可以在这里看到我的工作表：

http://plnkr.co/edit/aYJjwvNPcbDGQdUu6SOJ?p=preview

本质上，该图表旨在显示特定类型地区的平均销售价格，并通过选择开关在不同区域之间移动。在

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

1）第一个选定区域“Cannock Chase”的初始条形图级别高于其应有值，如果您将选择返回到该区域，则将其下拉。在

2）我最初的目的是在图表上显示一条水平线，代表一个地区所有销售的平均价格。在

它当前在图表中显示为矩形。在

你能帮我算一下怎么选最后一个“rect”吗？在

它应该以以下内容开头：

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

但是如果没有“身份证”，我就不知道怎么选最后一个。这是我应该补充的吗？在

Answer 1

酒吧高度

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

你已经在第一个了

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

在后者

^{2}$

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

普朗克-http://plnkr.co/edit/3SO6s1Kah43dwTASCvX2?p=preview

---

造型

使用SVG的好处在于可以使用CSS进行样式设置。如果你只是想改变最后一个酒吧的风格，你可以使用

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

普朗克-http://plnkr.co/edit/9OBw1Okmde73eyXZRVXX?p=preview

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

---

不过，我想你是在问用d3做这个。你可以用同一个选择器

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

普朗克-http://plnkr.co/edit/RrLEJa4ZCIEOGSVD4stL?p=preview

---

然而，如果你想用一种更为d3的方式来做这件事，你应该实际使用你的数据模型来表明最后一个数据点是特殊的，并用它来设计不同的样式。在

这里有一种方法，我们使用特殊值“AVERAGE”来确定我们需要对条形图进行不同的样式设置（您可以改为在数据中添加一个特殊属性）

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

普朗克-http://plnkr.co/edit/8Xt5xX2i2WF6nazoZCeo?p=preview