簡體   English   中英

d3js zoom svg和axix

[英]d3js zoom svg and axix

我正在嘗試使用d3將外部svg文件繪制到網頁中並使其放大滾動。 我跟着http://bl.ocks.org/mbostock/3892919但是當我添加我的svg文件時它仍然是固定的並且不會縮放。 我將繪制幾個svg所以我將有這樣的數組:

var data = []
data.push({
  name: "base",
  x: 50,
  y: 50,
  width: 350,
  url: 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg'
});

並使用函數繪制它:

function add(elements, offsetX = 0, offsetY = 0) {
  for (let e of elements) {
    d3.xml(e.url, 'image/svg+xml', function(error, xml) {
      if (error) {
        console.log('error' + error)
        throw error;
      }
      var svgNode = xml.getElementsByTagName('svg')[0];
      d3.select(svgNode).attr('id', e.name)
        .attr('x', e.x + offsetX)
        .attr('y', e.y + offsetY);
      svg.node().appendChild(svgNode);
      svg.select('#' + e.name)
        .attr('width', e.width);
    });
  }
}

完整的jsfiddle

我查看了可用的平移和縮放示例,這是我發現的。 zoomed功能中,應該在附加的元素上進行平移和縮放,而不僅僅是x和y軸。

所以,我創建了一個附加元素的組:

var elementsToScale = svg.append("g").attr("id", "elementsToScale")

我添加了zoomed功能中的最后zoomed行:

function zoomed() {
  svg.select(".x.axis").call(xAxis);
  svg.select(".y.axis").call(yAxis);
  var translate = d3.event ? d3.event.translate : "0,0"
  var scale = d3.event ? d3.event.scale : "1"
  svg.select("#elementsToScale").attr("transform", "translate(" + translate + ")" + " scale(" + scale + ")");    
}

然后我更改了add函數以將元素追加到elementsToScaleGroup

d3.xml(el.url, 'image/svg+xml', function(error, xml) {
    if (error) {
      console.log('error' + error)
      throw error;
    }
    var svgNode = xml.getElementsByTagName('svg')[0];
    d3.select(svgNode).attr('id', e.name)
      .attr('x', el.x + offsetX)
      .attr('y', el.y + offsetY);

    elementsToScale.node().appendChild(svgNode);
    elementsToScale.select('#' + el.name)
      .attr('width', el.width);
});

這是一個工作小提琴

唯一剩下的就是重置時附加的元素上的補間。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM