Question

当我试图访问对象的键和值时，它正在给undefined。以下是我的代码

<script type="text/javascript">

var data;
var xAxisName;
var yAxisName;
var jso;

function getX(d) {
    return d[xAxisName];
            }
function getY(d) {
    return d[yAxisName];
            }
d3.json("response.json", function (json) {

console.log("hi");
console.log(json);                //getting the values
console.log("this " +json.users); //getting the values
xAxisName = json.attribute1.;
console.log("xAxisName=" + xAxisName);   //Not getting the values
yAxisName = json.attribute2;
console.log("yAxisName=" + yAxisName);   //Not getting the values
data = json.users;
alert(data);

data.map(function(d) { console.log(getX(d));});
data.map(function(i) {console.log(i);});
visualize(data); //then start the visualization
});

function visualize (data) {

var padding = 40;
var margin = {top:30, right: 30, bottom: 30, left:100};
var w = 700 - margin.left - margin.right;
var h = 400 - margin.top - margin.bottom;

//the svg
var svg = d3.select("#container")
.append("svg")
.attr("class", "chart")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//the scales
var xScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeRoundBands([0, w], 0.04);

var yScale = d3.scale.linear()
.domain([d3.max(data, getY), 0])
.range([0, h]);

//the axes
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");

//add the data and bars

svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) { return xScale(i);})
.attr("y", function(d) { return yScale(getY(d));})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return h - yScale(getY(d));})
.attr("class", "bar");

//create axes

svg.append("g").attr("class", "x axis")
               .attr("transform", "translate(0," + h + ")").call(xAxis);

svg.append("g").attr("class", "y axis")
               .call(yAxis)
               .append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", ".71em")
               .style("text-anchor", "end")
                  .text(yAxisName); 
                           }
            alert("done");
       </script>

它为undefined和xAxisName提供yAxisName。在svg.selectAll("rect") y和height提供NaN。

我的JSON是

{

"users": [
    {
        "name": "warchicken",
        "score": 30
    },
    {
        "name": "daydreamt",
        "score": 100
    },
    {
        "name": "Anas2001",
        "score": 30
    },
    {
        "name": "ocjojo",
        "score": 30
    },
    {
        "name": "joklawitter",
        "score": 30
    }
]
}

Answer 1

看起来您希望从用户对象中提取属性名称。为此，您可以使用Object.keys()或使用for...in迭代对象（相关问题：How do I enumerate the properties of a JavaScript object?）。

var keys = Object.keys(json.users[0]);
xAxisName = keys[0];
yAxisName = keys[1];

请注意，虽然没有对对象属性进行排序。您可能最终xAxisName为"score"，反之亦然。

如果您需要xAxisName为某个值，则必须对其进行硬编码，或将信息添加到从服务器返回的JSON中。例如：

{
    "axes": ["name", "score"],
    "users": [...]
}

然后你得到它

xAxisName = json.axes[0];
// ...

附注：选择json作为对象的变量名称并不是最佳的，因为它表明变量包含一个包含JSON的字符串，而它实际上包含一个对象。那么chartData呢？

获得对象的关键和价值

1 个答案: