Question

我是D3.js的新手，无法解决看似小问题。问题是我真的不明白＆＃34;我的＆＃34;＆＃34;码。我在控制台上遇到的错误告诉我：＆＃34;语法错误：期望表达式，得到＆＃39;＆lt;＆＃39; ＆＃34;，这对我没有任何意义。可能有些人可以帮我这个。这是：

     var xyr = [
{x:1,y:1,r:1},
{x:2,y:2,r:2},
{x:3,y:3,r:3}
          ];

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

var scaleX = d3.scaleLinear().range([0,250]);
var scaleY = d3.scaleLinear().range([0,250]);

function render(data){
//Data Binding
var circles = svg.selectAll("circle").data(data);

scaleX.domain(d3.extent(data,function(d){ return d.x; }));
scaleY.domain(d3.extent(data,function(d){ return d.y; }));

  //Debugging (working correct  --> 125)

circles
//Enter
.enter().apend("circle").attr("r",5)
//Update
.merge(circles)
.attr("cx", function (d){ return scaleX; })
.attr("cy", function (d){ return scaleY; });

//Exit
circles.exit().remove();
};

    //Invoking the funktion with var xyr
render(xyr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

Answer 1

首先删除<script>和</script>标记，这些标记会抛出错误。其次，当你的代码是v4 / 5时我链接v3（我在我的代码片段中使用了v4）。第三，你有一些拼写错误，导致一些错误。最后（以及d3渲染的最大问题）是：

.merge(circles)
.attr("cx", function (d){ return scaleX; })
.attr("cy", function (d){ return scaleY; });

缺少数据链接，已更新为

.merge(circles)
.attr("cx", function (d){ return scaleX(d.x); })
.attr("cy", function (d){ return scaleY(d.y); });

var xyr = [{
    x: 1,
    y: 1,
    r: 1
  },
  {
    x: 2,
    y: 2,
    r: 2
  },
  {
    x: 3,
    y: 3,
    r: 3
  }
];

var body = d3.select("body");
var svg = body.append("svg").attr("width", 250).attr("height", 250);

var scaleX = d3.scaleLinear().range([0, 250]);
var scaleY = d3.scaleLinear().range([0, 250]);

function render(data) {
  //Data Binding
  var circles = svg.selectAll("circle").data(data);

  scaleX.domain(d3.extent(data, function(d) {
    return d.x;
  }));
  scaleY.domain(d3.extent(data, function(d) {
    return d.y;
  }));

  //Debugging (working correct  --> 125)

  circles
    //Enter
    .enter().append("circle").attr("r", 5)
    //Update
    .merge(circles)
    .attr("cx", function(d) {
      return scaleX(d.x);
    })
    .attr("cy", function(d) {
      return scaleY(d.y);
    });

  //Exit
  circles.exit().remove();
};

//Invoking the funktion with var xyr
render(xyr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

</body>

</html>

没有输出明显的权利＆＃34; D3.js - Code＆＃34; （简单的散点图）

1 个答案: