Svg语义缩放不适用于HTML中的SVG

Question

所以我需要对我的项目一点帮助。我需要对页面的html部分的SVG进行语义缩放。它来自于上传，因此SVG几乎不受我的控制。我需要在该SVG上应用平移和缩放。我找到这个例子http://bl.ocks.org/mbostock/3680957并试图使用它。这里是我的小提琴（!!小提琴被删除，看更新波纹管!!）和你可以看到什么都没有发生。但在控制台中有警告d不确定。你能找到我在这里错了吗？

谢谢你们！ :)

代码在这里：

HTML

<div id="cont"> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<svg width="1000" height="500" id="map_cont"> 
    <g> 
    <rect width="1000" height="500" fill="white"></rect> 
    <circle r="2.5" fill="blue" transform="translate(217.28118519969917,41.890758131264526)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(608.2409059060647,344.2198244793161)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(216.72484978866146,298.20041939104055)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(476.96900214940524,237.46273824202763)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(321.1504206509037,73.86045864552166)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(490.2928916777491,357.3678736179799)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(899.1499819566533,100.34312493154246)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(334.13921027824017,165.69359981846532)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(311.52586706987836,23.96973930478341)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(378.0376019607231,331.57321612058746)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(309.8850901872685,161.59290497259988)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(253.86150170977407,-102.58470619117588)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(514.6405714044365,453.63661200884786)"></circle> 
    </g> 
</svg> 
</div> 

的Javascript：

var width = 1000, 
    height = 500; 

var x = d3.scale.linear() 
    .domain([0, width]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, height]) 
    .range([height, 0]); 

var svg2 = d3.select("#map_cont") 
    .select("g") 
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom2)); 

var circle2 = svg2.selectAll("circle"); 

function zoom2() { 
console.log(circle2); 
circle2.attr("transform", transform); 
} 

function transform(d) { 
    return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; 
} 

UPDATE

那么一段时间，由于@Kaiido我取得了一些进展后， 。现在我有这个http://jsfiddle.net/syj4jhes/8/正如你所看到的，x和y坐标是错误的。现在我正在寻找帮助来正确计算它们...... :)

Answer 1

我解决了它！这是使用console.log的地狱，但我得到它在第九版的工作。希望这有助于任何人。这里拨弄http://jsfiddle.net/syj4jhes/9/

整体把戏是，d是圈子的初始位置的数组。一点点嘲弄和BA DUM TSS！有效。代码波纹因为你永远不知道会发生什么。

HTML

<div id="cont"> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<svg width="1000" height="500" id="map_cont"> 
    <g> 
    <rect width="1000" height="500" fill="white"></rect> 
    <circle r="2.5" fill="blue" transform="translate(217.28118519969917,41.890758131264526)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(608.2409059060647,344.2198244793161)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(216.72484978866146,298.20041939104055)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(476.96900214940524,237.46273824202763)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(321.1504206509037,73.86045864552166)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(490.2928916777491,357.3678736179799)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(899.1499819566533,100.34312493154246)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(334.13921027824017,165.69359981846532)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(311.52586706987836,23.96973930478341)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(378.0376019607231,331.57321612058746)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(309.8850901872685,161.59290497259988)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(253.86150170977407,-102.58470619117588)"></circle> 
    <circle r="2.5" fill="blue" transform="translate(514.6405714044365,453.63661200884786)"></circle> 
    </g> 
</svg> 
</div> 

的Javascript

var width = 1000, 
    height = 500; 

var x = d3.scale.linear() 
    .domain([0, width]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, height]) 
    .range([0, height]); 

var svg2 = d3.select("#map_cont") 
    .select("g") 
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([0.1, 8]).on("zoom", zoom2)); 

var circles = svg2.selectAll("circle")[0]; 
var circle2 = circles; 
var arrayLength = circle2.length; 
var orig_pos=[]; 
for (var i = 0; i < arrayLength; i++) { 
    var atribut=$(circle2[i]).attr("transform"); 
    var xval = atribut.match(/([-0-9.]*),/); 
    var yval = atribut.match(/,([-0-9.]*)/); 
    var pos= [ parseFloat(xval[1]),parseFloat(yval[1]) ]; 
    orig_pos.push(pos); 
} 

function zoom2() { 
    $(circle2).attr("transform", transform); 
} 

function transform(d) { 
    var xval = orig_pos[d][0]; 
    var yval = orig_pos[d][1]; 
    return "translate(" + x(xval) + "," + y(yval) + ")"; 
}