javascript - 在 div 中移动附加路径 (d3.js)

Question

我有一张 map ，我似乎无法移动它的位置。这是我的 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>

这是我绘制 map 并将其附加到“当前”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");  

问题是我无法移动 map (即 SVG 矩形内的“县”类。我希望它更靠左。我尝试设置“县”的 viewBox ' 类:

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

并且我尝试了其他 CSS 操作:

.counties {

 text-align: left;

一切都没有运气。任何人都可以告诉我我在这里的方法中缺少什么吗？

Answer 1

did you try... attr('transform','translate(x, y)' where x and y is the number you want to move it? 直接在路径元素上使用它. 这是一个代码笔:

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