javascript - 如何使用 D3 控件获取组中选定的路径索引？

Question

如何在单击路径时更改描边颜色。

而且单击后，我想在销毁和创建相同的组后保持相同的路径并更改描边颜色。

<g id="grproot">
    <path class="mapshape"  stroke="white" stroke-width="0.5" d="m241,9483290">
    <path class="mapshape"  stroke="white" stroke-width="0.5" d="m241,9483290">
    <path class="mapshape"  stroke="white" stroke-width="0.5" d="m241,9483290">
    <path class="mapshape"  stroke="white" stroke-width="0.5" d="m241,9483290">
    <path class="mapshape"  stroke="white" stroke-width="0.5" d="m241,9483290">
</g>

Answer 1

实现此目的的一种方法是设计一个自定义色标，如下所示:

var color = d3.scale.ordinal()
    .domain(["one", "two", "three"])
    .range(["#fff","#000","#333"]);

然后，您需要为每个路径分配一个“状态”，即:“一”、“二”或“三”，然后根据该状态为路径着色。

当点击事件发生时，您将更改数据集，使“状态”成为您想要的任何颜色。这将在销毁/重新创建同一组的过程中保留颜色。

希望这有帮助。