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

Question

所以我的项目几乎不需要帮助。我需要对页面的 html 部分中的 SVG 进行语义缩放。因此，它来自上传，SVG 大部分是我无法控制的。我需要对该 SVG 应用平移和缩放。我找到了这个例子 http://bl.ocks.org/mbostock/3680957并尝试使用它。这是我的 fiddle (!! fiddle 已删除，请参阅下面的更新!!)，您可以看到几乎没有任何反应。但是在控制台中有警告说 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]) + ")";
}

更新

所以过了一段时间，感谢@Kaiido，我取得了一些进步。现在我有了这个 http://jsfiddle.net/syj4jhes/8/如您所见，x 和 y 坐标计算错误。现在我正在寻找正确计算它们的帮助...:)

Answer 1

我解决了!使用 console.log 真是太糟糕了，但我在第 9 版中让它工作了。希望这对任何人都有帮助。在这里 fiddle http://jsfiddle.net/syj4jhes/9/

整个技巧是 d 是圆的初始位置数组。一点 mock 和 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) + ")";
}