Question

我有一张地图，似乎无法移动其位置。这是我的HTML：

<div class="container">
    <!-- Title -->
    <h1 class="title has-text-centered">New York</h1>
    <h2 class="subtitle has-text-centered">Income vs Poverty</h2>

    <div class="columns">
      <div class="column is-half">
        <svg class="current" width="780" height="850" style="text-align:left;" ></svg>
      </div>
       <div class="column is-half">
        <svg class="2015" width="580" height="800"></svg>
      </div>
    </div>

这是我绘制地图并将其附加到“当前” svg的地方：

 var geoPath = d3.geoPath()
.projection( albersProjection );



d3.select("svg.current").selectAll("path")
.data( CaliforniaCountiesOverdoses.features )
.enter()
.append( "path" )
.attr( "fill", "white" )
.attr( "opacity", .8 )
.attr( "stroke", "#696969" )
.attr("left", 200)
.attr( "border-radius", '50%' )
.attr( "stroke-width", ".35" )
.attr( "d", geoPath )
    .attr("class","counties")

    .attr("fill", function(d) { 
        var value = currentMap.get(d.properties.ID);
        return (value != 0 ? current_color(value) : "grey");

问题是我无法移动地图（即SVG矩形内的“县”类。我希望它向左移动。我尝试设置“县”的viewBox 'class：

$('counties').each(function () { $(this)[0].setAttribute('viewBox', '0 0 100 100') });

我尝试了其他CSS操作：

.counties {

 text-align: left;

}

一切都没有运气。有人可以告诉我我在这里遇到的问题吗？

Answer 1

您尝试过... attr('transform','translate(x, y)'，其中x和y是您要移动的数字吗？直接在path元素上使用它。这是一个codepen：

https://codepen.io/anon/pen/aaMPwJ

在div中移动附加路径（d3.js）

1 个答案: