0
私は、d3フレームワークの棒グラフに関するMike Bostockのチュートリアルに従っています。私はelasticsearchの反応から棒グラフを作成したい。 コードからの1行が何の理由もなく私のために働いていないとき、私は問題に直面しています。私のコード：Javascriptのd3棒グラフが機能しない
HTML：
<body>
<script type="text/javascript">
ping();
query1();
query2();
query3();
</script>
<div id="bar-chart"></div>
<div id="pie-chart"></div>
<div id="bar-chart2"></div>
</body>
のJavaScriptのindex.html： main.js
function query3() {
client.search({
index: 'twitter',
body: {
size: 0,
query: {
query_string: {
query: "*"
}
},
aggs: {
touchdowns: {
terms: {
field: "user.screen_name",
size: 10,
order: {
_count: "desc"
}
}
}
}
}
}).then(function (resp) {
var data = resp.aggregations.touchdowns.buckets;
console.log(data);
// d3 donut chart
var canvas2 = d3.select("#bar-chart2").append("svg")
.attr("width", 960)
.attr("height", 500)
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
// HERE IS THE PROBLEM !!!!!!!!
console.log("test")
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);
console.log("test1")
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(function(d) { return d.key; }));
y.domain([0, d3.max(data, function(d) { return d.doc_count; })]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "%"))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.key); })
.attr("y", function(d) { return y(d.doc_count); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.doc_count); });
}, function (err) {
console.trace(err.message);
});
}
出力：
コンソール：
test
データオブジェクト：
[{key: "carfindlychevy", doc_count: 12243}, {key: "carfindlyjeep", doc_count: 9876}, {key: "carfindlycali", doc_count: 7879}, {key: "carfindlyny", doc_count: 7737}, {key: "carfindly", doc_count: 7287}, {key: "carstexas", doc_count: 6663}, {key: "carfindlyfl", doc_count: 6617}, {key: "carfindlyaudi", doc_count: 6061}, {key: "carfindlymer", doc_count: 5604}, {key: "carfindlybmw", doc_count: 5480}]
私はmacOSx + Safariに取り組んでいます。私はあなたのアドバイスのおかげで、必要なすべての情報を提供したがっています。
をおそらく助けることができるようにあなたのデータがどのように見えるかを共有する：インポート時したがって、V4を使用できますか？ – mrkre