0

オブジェクトのキーと値にアクセスしようとしているときに、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ています。と与える。_xAxisNameyAxisNamesvg.selectAll("rect") yheightNaN

私のJSONは

{

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

1 に答える 1

0

ユーザー オブジェクトからプロパティ名を抽出したいようです。これを行うには、オブジェクトを使用するObject.keys()か、オブジェクトを反復処理しますfor...in(関連する質問: JavaScript オブジェクトのプロパティを列挙するにはどうすればよいですか? )。

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-26T10:17:36.387 に答える