Question

我正在尝试使用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！

Answer 1

感谢BJK，他帮助我从谷歌D3.js小组，我找到了问题。我没有在开发环境中运行。我使用的是本地文件系统，但并不总是有效。

以下是BJK发给我的建议：＆＃34;见https://github.com/d3/d3/wiki =＆gt;部分＆＃34;本地发展＆＃34; ...＆＃34;

切换到开发环境之后，Mike Bostock（仅供参考，我记得他的名字是BossTalk，这对他说像老板这样的数据是正确的）＆＃39代码完美无缺。

干杯。

中风短跑插值示例代码不起作用

1 个答案: