獲取對象的關鍵和值

雖然我試圖訪問對象的鍵和值，它給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 
    } 
] 
}

來源

2013-08-26 Sathesh S

xAxisName = json.attribute1 .;你在這行結尾處有一個額外的點...不知道是否這是問題...你的Json對象中的 – kangoroo

沒有任何像attribute1和attribute2什麼值你想要更多的json.attribute1。是不是一個有效的操作 –

這也是如此，也許像 json.users.name，json.users.score 雖然從來沒有用過json真的這樣 – kangoroo

它看起來要提取從用戶對象屬性名喜歡。爲此，您可以使用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怎麼樣？

來源

2013-08-26 10:17:36

現在我又遇到了另一個問題。我是從x軸下面100px開始的圖形。如何將圖形設置爲從x軸線開始。 –

如果你有新的問題，你不能解決自己，你應該問一個新的問題。 –

獲取對象的關鍵和值

回答

相關問題