如何实现D3图表的放大效果？ [英] How to achieve magnifying square effect for D3 charts?

问题描述

请查看此，这是相关的，但不是我想要的。

解决方案

您可以不显式声明 width 和 height 在SVG（它被CSS覆盖），使用 viewBox 属性，然后允许AnythingZoom clone 您的原始图表的内容。

演示（易碎）： http：// jsfiddle。 net / H9psX / http://jsfiddle.net/H9psX/38/

更改

  var svg = d3.select（＃small-chart）append（svg）
 // .attr（width，diameter + 300）
 // .attr直径）
 .attr（'viewBox'，0 0+ 225 ++ 225）; 
 
 // ... 
 
 $（＃zoom3）。anythingZoomer（{
 clone：true 
}）; 
   

分离关注

$ b b

因为你是使用D3绘制SVG（你需要知道 width 和 height 包布局）和使用jquery插件通过设置类和绝对定位放大，你必须共享坐标（ 225px 魔术数字）在CSS和JS。

理想情况下，您希望只在一个地方保留幻数。要做到这一点，你只能在CSS中声明该值，然后在创建SVG元素后在JS中读取它们。

Take a look at this jsfiddle. Magnifying on hover works well for text and images, but I would like to have the same effect for the chart.

I would like the solution, if possible, to be applicable to any D3 SVG-based chart.

The example uses jquery plugin AnythingZoomer, it looked to me as a good starting point, however, you don't need to stick to it, you can use anything else if you wish.

I am aware of D3 fisheye pluging, this is related, but not quite what I want.

解决方案

You can do this by not explicitly declaring width and height in the SVG (which is overwritten by CSS anyway), using the viewBox attribute, and then allowing AnythingZoom to clone the content of your original chart.

Demo (Fragile): http://jsfiddle.net/H9psX/ http://jsfiddle.net/H9psX/38/

Changes

var svg = d3.select("#small-chart").append("svg")
//    .attr("width", diameter + 300)
//    .attr("height", diameter)
    .attr('viewBox', "0 0 " + 225 + " " + 225);

// ...

$("#zoom3").anythingZoomer({
    clone: true
});

Separation of concerns

Since you are drawing in SVG using D3 (where you need to know the width and height for the pack layout) and using a jquery plugin which zooms by setting classes and absolute positioning, you have to share the coordinates (the 225px magic number) in CSS and in JS.

Ideally, you would want to keep the magic number at only one place. To do that you can declare the value only in CSS and then read them in your JS after creating your SVG element.

这篇关于如何实现D3图表的放大效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！