Перемещение добавленной дорожки в div (d3.js)

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 класса 'графства':

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

И япопробовал другие манипуляции с CSS:

.counties {

 text-align: left;

}

Все без удачи. Кто-нибудь может сказать мне, что я упускаю в моем подходе здесь?

Answer 1

Вы пробовали ... attr('transform','translate(x, y)', где х и у - число, которое вы хотите переместить?Используйте его непосредственно на элементе пути.Вот кодовая ручка:

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