Question

我在更新（输入/更新/退出）几个内联SVG路径的填充颜色时遇到了一些问题。

<svg>
<g id="section11">
<path  id="section11p" d="m 431.78572,404.50506 0,36.875 20,-0.0893 22.14285,3.66072 8.92858,-38.48215 -7.5,-1.60714 z"/>
</g>

<g id="section10">
<path  id="section10p" d="m 476.792,445.13425 8.83884,-38.38579 19.31917,6.43972 21.2132,11.23795 14.77348,9.21764 -21.97082,33.71384 -28.158,-16.66752 z"/>
</g>
</svg>

我使用了这个小提琴（http://jsfiddle.net/ybAj5/6/）中的代码来成功（最初）为我的所有内联SVG路径着色：

var colour = d3.scale.linear()
        .domain([0, 20])
        .range(["lightgreen", "darkgreen"]);

 dataset1.forEach(function(d){ //d is of form [id,value]
   d3.select("g#"+d[0]) //select the group matching the id
     .datum(d) //attach this data for future reference
     .selectAll("path, polygon")
     .datum(d) //attach the data directly to *each* shape
     .attr("fill", d?colour(d[1]):"lightgray");
});

这是我用过的数据集：

var dataset1 = [["section10", 3],
                ["section11", 11],   
                ["section13", 19]];

但我想合并这两个数据集：

var dataset2 = [["section10", 0],
                ["section11", 11],   
                ["section13", 15]];

var dataset3 = [["section10", 1],
                ["section11", 3],   
                ["section13", 18]];

使用此下拉菜单：

 <div class ="fixed"><select id = "opts">
    <option value="dataset1" selected="selected">2012 Cohort</option>
    <option value="dataset2">2013 Cohort</option>
    <option value="dataset3">2014 Cohort</option>
 </select></div>

我理解我需要在enter / update / exit过程中封装过程，如下所示：

 function updateLegend(newData) {

    // bind data
    var appending = d3.selectAll('g')
            .data(newData);

    // add new elements
    appending.enter().append('g');

    // update existing elements
    appending.transition()
            .duration(0)
            .style("fill", function(d,i){return colour(i);});

    // remove old elements
    appending.exit().remove();

}

// generate initial legend
updateLegend(ds2);

// handle on click event
d3.select('#opts')
        .on('change', function() {
            var newData = eval(d3.select(this).property('value'));
            updateLegend(newData);
        });

但它很难，因为我觉得我见过的所有例子都是用d3创建的SVG更新，而不是从Inkscape（一个开源SVG软件）创建并粘贴到html页面的自定义SVG。

我觉得我非常接近解决方案，任何帮助都会受到赞赏！

Answer 1

您不需要为此输入“更新”，“更新”和“退出”选项。只需传递dataset的值作为参数。

此外，您不需要绑定数据。你只需要这个：

data.forEach(function(d){ //d is of form [id,value]
    d3.select("#"+d[0]) //select the group matching the id
        .attr("fill", colour(d[1]));
});

查看演示：

var colour = d3.scale.linear()
        .domain([0, 20])
        .range(["lightgreen", "darkgreen"]);
				
var datasets = {dataset1: [["section10", 0],
                ["section11", 11]],
								dataset2:[["section10", 1],
                ["section11", 2]],
								dataset3:[["section10", 17],
                ["section11", 19]],
								dataset4:[["section10", 2],
                ["section11", 19]]
								};
		   
								
d3.select('#opts').on('change', function() {
            var value = d3.select(this).property('value');
						var newData = datasets[value];
            reColor(newData);
        });
				
function reColor(data){
data.forEach(function(d){ //d is of form [id,value]
   d3.select("#"+d[0]) //select the group matching the id
     .attr("fill", colour(d[1]));
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
 <div class ="fixed"><select id = "opts">
    <option value="" selected="selected">Select</option>
    <option value="dataset1">2013 Cohort</option>
    <option value="dataset2">2014 Cohort</option>
		<option value="dataset3">2015 Cohort</option>
		<option value="dataset4">2016 Cohort</option>
 </select></div> 
<svg width="300" height="300">
<g id="section11">
<path  id="section11p" d="m 31.78572,104.50506 0,36.875 20,-0.0893 22.14285,3.66072 8.92858,-38.48215 -7.5,-1.60714 z"/>
</g>

<g id="section10">
<path  id="section10p" d="m 76.792,145.13425 8.83884,-38.38579 19.31917,6.43972 21.2132,11.23795 14.77348,9.21764 -21.97082,33.71384 -28.158,-16.66752 z"/>
</g>
</svg>

D3：更新内联SVG的填充颜色

1 个答案: