Question

我正在使用外部JavaScript库在ASP.NET应用程序中生成D3 SVG图表。该库接受div容器，并在div容器内创建一个D3图表。 D3图表当前是静态的。我想添加缩放功能。是否可以扩展由外部javascript库生成的D3图表以添加放大功能？

生成的SVG：

"the result is "

我尝试了以下代码，但没有运气：

<div id="svgContainer2" style="margin-left: 15px;">
   <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <g>
         <circle style="fill: #b8dee6;" cx="831.5" cy="50" r="50" />
      </g>
   </svg>
</div>

Answer 1

解决方案：工作示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<!-- Create a div where the circle will take place -->
<div id="svgContainer2" style="margin-left: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <g><circle style="fill: #b8dee6;" cx="333" cy="333" r="50" /></g>
</svg>
</div>
</body>
<script>
var svg = d3.select("#svgContainer2 svg g")
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
</script>
</html>

扩展D3图表以添加缩放功能

1 个答案: