描边破折号插值示例代码不工作

我想用Mike Bostock’s Block 5649592作为示例来绘制描边 - 划线插值。描边破折号插值示例代码不工作

我将他的代码从index.html示例复制到本地计算机上的html文件中，并且当我打开html文件时它不呈现任何内容。有人知道这里发生了什么？我在这里错过了什么吗？

我在这里复制其代码：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<body> 
<style> 

path { 
    fill: none; 
    stroke: #000; 
    stroke-width: 3px; 
} 

</style> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script> 

var points = [ 
    [480, 200], 
    [580, 400], 
    [680, 100], 
    [780, 300], 
    [180, 300], 
    [280, 100], 
    [380, 400] 
]; 

var line = d3.svg.line() 
    .tension(0) // Catmull–Rom 
    .interpolate("cardinal-closed"); 

var svg = d3.select("body").append("svg") 
    .datum(points) 
    .attr("width", 960) 
    .attr("height", 500); 

svg.append("path") 
    .style("stroke", "#ddd") 
    .style("stroke-dasharray", "4,4") 
    .attr("d", line); 

svg.append("path") 
    .attr("d", line) 
    .call(transition); 

function transition(path) { 
    path.transition() 
     .duration(7500) 
     .attrTween("stroke-dasharray", tweenDash) 
     .each("end", function() { d3.select(this).call(transition); }); 
} 

function tweenDash() { 
    var l = this.getTotalLength(), 
     i = d3.interpolateString("0," + l, l + "," + l); 
    return function(t) { return i(t); }; 
} 

</script>

任何帮助表示赞赏！谢谢。

问题解决了

请参阅我的回答如下职位。荣誉BJK！

来源

2017-06-07 Counter10000

既然我敢肯定你没有下载库，提供在线参考D3：''。 –

@GerardoFurtado虽然不好，那不应该是问题！请参阅[*“我可以将所有的http：//链接改为//？”*]（/ q/4831741）和https://www.paulirish.com/2010/the-protocol-relative-url/。 – altocumulus

@altocumulus是的，你是正确的，我不小心在我的评论：我只是通过代码虽然是这是一个绝对路径脱脂。在我的（tyred）mynd中，我读了'“/d3.v3.min.js”'。 –

感谢来自Google D3.js小组帮助我的BJK，我找到了问题所在。我没有在开发环境中工作。我正在使用本地文件系统，这并不总是工作。

这里是建议BJK送我：“看https://github.com/d3/d3/wiki =>章节‘地方发展’......”

切换到开发环境后，麦克·博斯托克（仅供参考，我记得他的名字作为BossTalk，这因为他像老板一样在谈论数据）他的代码完美无缺。

干杯。

来源

2017-06-07 21:48:45 Counter10000

描边破折号插值示例代码不工作

回答

相关问题