Пример D3 показывает пустой прямоугольник - PullRequest
Новая
       61

Пример D3 показывает пустой прямоугольник

0 голосов
/ 06 апреля 2020

Я должен что-то неправильно понять, но я не могу сделать что-либо перетаскиваемое с помощью d3. js, и когда я копирую примеры, они тоже не работают.

Например, у меня есть файл HTML, который выглядит следующим образом: 

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>
</head>
<body>
<script>
// Create the SVG

var svg = d3.select("body").append("svg")
  .attr("width", 700)
  .attr("height", 400);

// Add a background
svg.append("rect")
  .attr("width", 700)
  .attr("height", 400)
  .style("stroke", "#999999")
  .style("fill", "#F6F6F6")

// Define drag beavior
var drag = d3.behavior.drag()
    .on("drag", dragmove);

function dragmove(d) {
  var x = d3.event.x;
  var y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}

svg.append("circle")
.attr({ cx: 20, cy: 20, r: 5, fill: "blue" })
.style("cursor", "pointer")
.call(drag);

svg.append("circle")
.attr({ cx: 50, cy: 50, r: 5, fill: "red" })
.style("cursor", "pointer")
.call(drag);
</script>
</body>

, который я скопировал с http://jsfiddle.net/5hemY/1/. Если я попробую его на jsfiddle, он будет работать, как и ожидалось, однако, если я открою свой html файл с firefox, я увижу только пустой белый прямоугольник.

Полагаю, я что-то упустил из основы c ...

...