d3.js topojson 地图的样式填充未完全填充答案

【问题标题】：Style fill for d3.js topojson map not completely fillingd3.js topojson 地图的样式填充未完全填充
【发布时间】：2014-12-15 21:38:14
【问题描述】：

我正在尝试为 topojson 地图添加颜色。当我添加填充时，我得到了一个非常奇怪的输出，其中一些颜色发生了变化，但随机的大片与以前一样。灰色图像是我添加填充之前的图像。我希望第二张地图完全是橙色的。

代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 1200,
    height = 1200;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geo.path()
    .projection(projection);

var g = svg.append("g");


// load and display the World
d3.json("us_states.json", function(error, us) {
  g.append("g")
      .attr("id", "states")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", "#ffc04c"); //this is the offending line

  g.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("id", "state-borders")
      .attr("d", path);

});
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });
svg.call(zoom)

</script>
</body>
</html>

【问题讨论】：

我认为问题出在您之后添加的状态边界——根据您的 CSS 填充为灰色，这就是您所看到的。尝试在 CSS 中为paths 设置fill: none。
修复了它。你想把它作为答案让我接受吗？

标签： html css svg d3.js topojson

【解决方案1】：

问题实际上不在于州本身的paths（您突出显示的行），而是在您之后附加的州边界中——根据您的 CSS 填充为灰色，这就是你看到了。

要修复，请在 CSS 中将 fill: none 设置为 paths。

【讨论】：