Question

你好，我试图重现D3 fishyeye效果，如http://bost.ocks.org/mike/fisheye/中的demoes所示，区别在于我的svg文件嵌入在html文件中。

请在下面找到我的代码。

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">

<title>Prova</title>
<style>

.background {
  fill: none;
  pointer-events: all;
}

path {
  fill: none;
  stroke: #333;
}

</style>
</head><body>
<script src="2962761_files/d3.js"></script>
<script src="2962761_files/fisheye.js"></script>

<svg>Svg Code HERE </svg>


<script>

var width = 960,
    height = 500,
    xStepsBig = d3.range(10, width, 20),
    yStepsBig = d3.range(10, height, 20),
    xStepsSmall = d3.range(0, width + 6, 6),
    yStepsSmall = d3.range(0, height + 6, 6);

var fisheye = d3.fisheye();

var line = d3.svg.line();

/*var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(-.5,-.5)");*/

var svg = d3.select("svg")
            .attr("pointer-events", "all")
            .attr("transform", "translate(-.5,-.5)"); 

/*
svg.append("rect")
    .attr("class", "background")
    .attr("width", width)
    .attr("height", height);

svg.selectAll(".x")
    .data(xStepsBig)
  .enter().append("path")
    .attr("class", "x")
    .datum(function(x) { return yStepsSmall.map(function(y) { return [x, y]; }); });

svg.selectAll(".y")
    .data(yStepsBig)
  .enter().append("path")
    .attr("class", "y")
    .datum(function(y) { return xStepsSmall.map(function(x) { return [x, y]; }); });

var path = svg.selectAll("path")
    .attr("d", line);
    */

svg.on("mousemove", function() {
  fisheye.center(d3.mouse(this));
  path.attr("d", function(d) { return line(d.map(fisheye)); });
});



/*
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);
*/

/*var xml = (new XMLSerializer).serializeToString(svg);*/
document.write('<div>'+svg+'</div>');
/*document.write('<div>'+xml+'</div>');*/

document.write('<div>Leonardo Ligabue</div>');




</script>



</body></html>

我做错了什么？有人可以帮帮我吗？

D3鱼眼失真变换

0 个答案: