Javascript 如何使用不同的属性名称引用d3.js中的数据对象？

我试图在d3.js中从每个属性都有不同名称的数据集中创建一些圆圈：

var h = 500;
var w = 800;
var data = {'Jane' : 30, 'John' : 40, 'Mary' : 50, 'Al' : 60};
var svg = d3.select("body") 
    .append("svg")
    .attr("width", w)
    .attr("height", h);
var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return d;
    })
    .attr("cy", function(d) {
        return d;
    })
    .attr("r", function(d) {
        return d;
    });

---

有没有一种方法可以使圆的半径与这些人的年龄相对应，而无需重新构造数据？

首先，数据应该是一个数组；就是

var data = [{'Jane' : 30, 'John' : 40, 'Mary' : 50, 'Al' : 60}]

但即使是上面的说法也不正确，因为d3将遍历数组的所有元素并调用相应的回调；因此，您必须创建一个由n个元素组成的数组

var data=[{name:jane:，age:30}，{name:'John'，age:40}，{name:'Mary'，age:50}，{name:'Al'，age:60}]

您可以编写一个助手函数，将数据转换为适当的格式：

            var h = 500;
            var w = 800;
            var data = convertData({jane: 30 ,  'John': 40 ,  'Mary': 50 ,  'Al': 60 });
            var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
            var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("cx", function (d) {
                    return d;
                })
                .attr("cy", function (d) {
                    return d;
                })
                .attr("r", function (d) {
                    return d.age;
                });

            function convertData(data) {
                var ret = [];
                for (var prop in data) {
                    ret.push({
                        name: prop,
                        age: data[prop]
                    });
                }

                return ret;
            }

您需要考虑您希望cx和cy值是什么样子。

请尝试以下代码：

var datanew = [];
$.each(data,function(key,value){
                       datanew.push({
                        name: key,
                        age: value
                                   });
                               });

---

我强烈建议重新格式化数据，以明确您的意图。