从网站复制的 d3 示例在我的计算机上不起作用

Question

我是HTML的新手，所以越基础越好讲解。我正在尝试运行在我的计算机上从该网站获取代码：https://bl.ocks.org/deristnochda/1ffe16ccf8bed2035ea5091ab9bb53fb

我将脚本 src 行更改为 say，否则它不会运行任何内容。但是，现在当我尝试缩放时它不起作用。我的版本和这个一模一样：https://bl.ocks.org/deristnochda/ef29cbb2724bf918971400797166120c 缩放不正确

我想我可能缺少一些非常基本的东西，也许我没有图书馆什么的？非常感谢任何帮助，谢谢！

<html>
 
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.axis {
    font-size: 11pt;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}
</style>
</head>
<body>
    <div class="container">
        <svg></svg>
    </div>
 <script>
var data_str = "x,y\n0,0.45\n1,-0.55\n2,-0.15\n3,2.06\n4,1.49\n5,2.34\n6,3.21\n7,4.56\n8,3.78\n9,4.24\n10,5.01"

var data = d3.csvParse(data_str, function(d) {
    return {
        x:+d.x, 
        y:+d.y,
    };
});

var margin = {top: 20, right: 50, bottom: 20, left: 80},
    width = 900 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var zoom = d3.zoom()
    .scaleExtent([1, 5])
    .extent([100, 100], [width-100, height-100])
    .on("zoom", zoomed);

function zoomed() {
    svg.selectAll(".charts")
        .attr("transform", d3.event.transform);
    d3.selectAll('.line').style("stroke-width", 2/d3.event.transform.k);
    gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
    gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
}

var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(zoom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear()
    .domain([0, 10])
    .range([0, width]);
var y = d3.scaleLinear()
    .domain([-2, 6])
    .range([height, 0]);

var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

var gX = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
var gY = svg.append("g")
     .attr("class", "axis axis--y")
     .call(yAxis)

line = d3.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });
    
svg.append("g")
    .attr("class", "charts")
    .append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", function(d) { return line(d); });

</script>
</body>
 
</html>

Answer 1

这是由于工作示例和您的代码中使用的 D3 库的版本所致。所以，改变

<script src="https://d3js.org/d3.v4.min.js"></script>

要使用 4.3 版（我使用的是 CDN）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

祝你好运。

从网站复制的 d3 示例在我的计算机上不起作用

d3 example copied from website doesn't work on my computer

html

javascript

plot

zooming

d3.js