Moving appended path in a div (d3.js)

Question

I have a map that I seem to be unable to move the position of. Here's my 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>

And here's where I draw the map and append it to the 'current' 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");  

The problem is I can't move the map (i.e the 'counties' class within the SVG rectangle. I'd like it to be way further to the left. I've tried to set the viewBox of the 'counties' class :

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

And Ive tried other CSS manipulation:

.counties {

 text-align: left;

}

All with no luck. Can any one tell me what i'm missing in my approach here?

Answer 1

did you try... attr('transform','translate(x, y)' where x and y is the number you want to move it? Use it directly on the path element. Here is a codepen:

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