我有一张 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;
一切都没有运气。任何人都可以告诉我我在这里的方法中缺少什么吗?
最佳答案
did you try... attr('transform','translate(x, y)'
where x and y is the number you want to move it? 直接在路径元素上使用它. 这是一个代码笔:
关于javascript - 在 div 中移动附加路径 (d3.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52449993/