Question

我正在尝试使用d3.js实现平移和缩放功能，一切正常，但是当我尝试在Safari上运行相同的代码时，图像不会显示。

问题的再创造（请在野生动物园中运行）：

＆＃13;

W20180126-11:07:08.933(1)? (STDERR) Error: Cannot find module 'mypackage'
W20180126-11:07:08.933(1)? (STDERR)     at Function.Module._resolveFilename (module.js:536:15)
W20180126-11:07:08.933(1)? (STDERR)     at Function.resolve (internal/module.js:18:19)
W20180126-11:07:08.933(1)? (STDERR)     at Object.require (/private/var/folders/q_/nyqwc8q55qx3c_153hvt8zy00000gn/T/meteor-test-runqigr0c.jhjdg/.meteor/local/build/programs/server/boot.js:287:32)
W20180126-11:07:08.934(1)? (STDERR)     at makeInstallerOptions.fallback (packages/modules-runtime.js:651:18)
W20180126-11:07:08.934(1)? (STDERR)     at require (packages/modules-runtime.js:244:16)
W20180126-11:07:08.934(1)? (STDERR)     at collections.tests.js (imports/startup/both/collections.tests.js:1:306)
W20180126-11:07:08.935(1)? (STDERR)     at fileEvaluate (packages/modules-runtime.js:343:9)
W20180126-11:07:08.935(1)? (STDERR)     at require (packages/modules-runtime.js:238:16)
W20180126-11:07:08.935(1)? (STDERR)     at /private/var/folders/q_/nyqwc8q55qx3c_153hvt8zy00000gn/T/meteor-test-runqigr0c.jhjdg/.meteor/local/build/programs/server/app/app.js:7933:1
W20180126-11:07:08.935(1)? (STDERR)     at infos.forEach.info (/private/var/folders/q_/nyqwc8q55qx3c_153hvt8zy00000gn/T/meteor-test-runqigr0c.jhjdg/.meteor/local/build/programs/server/boot.js:414:13)

＆＃13;

let imgHeight = 400, imgWidth = 900,
    width =  900, height = 450;

let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

let svg = d3.select("#canvas").append("svg")
    .attr("width",  width + "px")
    .attr("height", height + "px");

svg = svg.append("g")
    .attr("transform", "translate(0,25)")
    .call(zoom)
    .append("g");

svg.append("image")
    .attr("width",  imgWidth + "px")
    .attr("height", imgHeight + "px")
    .attr("href", "https://www.w3schools.com/howto/img_fjords.jpg");

function zoomed() {
  svg.attr("transform", d3.event.transform);
}

＆＃13;

Answer 1

我只需将图片标记中的属性href更改为xlink:href，现在它正常工作。

let imgHeight = 400, imgWidth = 900,
    width =  900, height = 450;

let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

let svg = d3.select("#canvas").append("svg")
    .attr("width",  width + "px")
    .attr("height", height + "px");

svg = svg.append("g")
    .attr("transform", "translate(0,25)")
    .call(zoom)
    .append("g");

svg.append("image")
    .attr("width",  imgWidth + "px")
    .attr("height", imgHeight + "px")
    .attr("xlink:href", "https://www.w3schools.com/howto/img_fjords.jpg");

function zoomed() {
  svg.attr("transform", d3.event.transform);
}

<div id='canvas'>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>

尝试实现平移和缩放功能时，在野生动物园中未显示D3.js V4图像

1 个答案: