Question

我是D3的新手。我创建了一个包含五个气泡的图表，其中“r”属性是通过名为“estudiantes”的JSON成员定义的。在同一个图表中有一个按钮。我试图做到这一点，当有人点击按钮时“r”属性改变并由其他名为estudiantes2010的JSON成员定义，但它不起作用。如果我使用“r”的固定值，动画工作和气泡的半径会发生变化，所以我猜我做错了将JSON对象绑定到r属性，但我不知道是什么。谢谢！

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="data/carreras.json"></script>
</head>
<body>
     <script type="text/javascript">

          var w = 2000;
          var h = 500;

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

          var circulos = SVG.selectAll("circle")
           .data(jsonCarreras2002)
           .enter().append("circle")
           .style("stroke", "gray")
           .style("fill", "white")
           .attr("r", function(d) {return Math.sqrt(d.estudiantes/20);})
           .attr("cx", function(d, i){return 30+(i*140+170)})
           .attr("cy", 250);

          var button = d3.select("body")
            .append("input")
            .attr("type","button")
            .attr("value", "A button");

          button.on("click", function() {
            circulos.transition()
           .attr("r", function(d) {return Math.sqrt(d.estudiantes2010/20);})
           });



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

json文件是：

          var jsonCarreras2002 = [
            { "nombre": "Artes y Humanidades",
              "estudiantes": 29410,
              "estudiantes2010": 38767,
              "prueba": 20},
            { "nombre": "CC. Sociales y jurídicas",
              "estudiantes": 147482,
              "estudiantes2010": 140613,
              "prueba": 20},
              { "nombre": "Ciencias",
              "estudiantes": 18510,
              "estudiantes2010": 20189,
              "prueba": 20},
              { "nombre": "CC. De la Salud",
              "estudiantes": 22238,
              "estudiantes2010": 44636,
              "prueba": 20},
              { "nombre": "Ingeniería y Arquitectura",
              "estudiantes": 75947,
              "estudiantes20103": 59772,
              "prueba": 20}];

Answer 1

首先，我认为您在json中有一个拼写错误，在最后一行之前，estudiantes20103应该是我猜estudiantes2010

看看这个example that I made based on yours。在底部我添加了一个按钮，为所有圈子设置常量值，只是为了好玩。

enter image description here

用按钮播放一下，你会看到两者都有效。如果您想进行更彻底的测试，可以创建更多按钮。

然后只看你的例子有什么问题，但无论如何你都有一个有效的解决方案。

一个区别是我在函数getData()中封装了数据定义，也尝试过。

如果你有时间，你可以看看其他更有用，更复杂，但也很漂亮的例子in this question。

enter image description here

如何使用JSON对象的元素来更改D3气泡图的动画中的属性

1 个答案: