在 div (d3.js) 中移动附加路径答案

【问题标题】：Moving appended path in a div (d3.js)在 div (d3.js) 中移动附加路径
【发布时间】：2018-09-22 03:47:50
【问题描述】：

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

}

一切都没有运气。谁能告诉我我在这里的方法中缺少什么？

【问题讨论】：

路径没有 viewBox 属性，您需要在
我该怎么做？我知道'当前' html svg - 外部矩形是一个 svg，但是如何在我附加到这个的路径上设置它？谢谢罗伯特！
也许是通过它的父母？

标签： javascript html css d3.js svg

【解决方案1】：

你试过... attr('transform','translate(x, y)' 其中x 和y 是你要移动的数字吗？直接在路径元素上使用它。这是一个代码笔：

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

【讨论】：

为什么不使用所需的转换将所有路径包含在 g 元素中？