Question

我正在尝试将D3js缩放应用于内联SVG。但不知何故，它不想按预期工作。到目前为止，我在网上发现的任何东西都只使用D3，当使用自己创建svg的逻辑然后操纵它时，它可以正常工作。所以我在这个链接上找到了一个很好的例子：

http://plnkr.co/edit/RDgrINy7DkEBRD7pcWRD?p=preview

我希望获得相同的效果，但使用内联SVG。因此，按照上面链接的示例，我创建了下面的代码，重新创建了我的问题。仅当鼠标悬停在元素上时，缩放才有效。然后当缩小并尝试平移圆圈时离开图片并且无法返回。

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="D3/d3.js"></script>
</head>
<body>
 <div id="app">
 <svg id="svg" width="600" height="600">
   <g>
    <rect width="600" height="600" style="fill: lightblue" style="opacity: 0.4"  pointer-events="all"></rect>
    <g>
      <g id='damnCircles'>
        <circle cx="100" cy="100" r="20" style="fill: red"></circle>
        <circle cx="200" cy="200" r="20" style="fill: red"></circle>
        <circle cx="300" cy="300" r="20" style="fill: red"></circle>
      </g>
    </g>
   </g>
 </svg>
 </div>
<script>

var zoom = d3.zoom()
.scaleExtent([0.1, 10])
.on("zoom", zoomed);

function zoomed() {
  svg.attr("transform", d3.event.transform);
//  console.log(svg.attr('transform'));
   console.log(svg);
}

var svg = d3.select("#damnCircles")
  .call(zoom);
 </script>
</html>

任何有关我做错的提示的帮助都表示赞赏！谢谢你的时间。

Answer 1

如果其他人遇到类似的问题。我只是想通了：）

 @RequestMapping(value = "/batch/download", method = RequestMethod.POST, produces = "text/csv")
     @ResponseBody
     public void downloadNGIBatchSelected(HttpServletResponse response) throws IOException {
         List<String> ids = Arrays.asList("1312321","312313");

         generateNewCustomerCSV(response.getWriter(),ids);
     }

     private void generateNewCustomerCSV(PrintWriter writer, List<String> ids){
     String NEW_LINE_SEPARATOR = "\n";
       //CSV file header
       Object[] FILE_HEADER = {"Token Number",
               "Token Expiry Date",

          };
       CSVPrinter csvPrinter = null;
       try {
           csvPrinter = new CSVPrinter(new BufferedWriter(writer), CSVFormat.DEFAULT.withRecordSeparator(NEW_LINE_SEPARATOR));
           //Create CSV file header
           csvPrinter.printRecord(FILE_HEADER);

           for (PolicyMap PolicyMap : policyMaps) {
               List customerCSV = new ArrayList();
               customerCSV.add(PolicyMap.getInsurancePolicy().getTokenNo());
             try {
                   csvPrinter.printRecord(customerCSV);
               } catch (IOException e) {
                   e.printStackTrace();
               }
           }
       } catch (IOException e) {
           e.printStackTrace();
       } finally {
           try {
               writer.flush();
               writer.close();
               csvPrinter.close();
           } catch (IOException e) {
               System.out.println("Error while flushing/closing fileWriter/csvPrinter !!!");
               e.printStackTrace();
           }
       }
     }

现在按预期缩放和平移工作！大!!

d3js zoom inline svg

1 个答案: