1
現在、24時間ごとに既存のグラフにD3.JSを追加しようとしています。新しいデータを追加する際にD3.JS棒グラフのオフセットが発生する
[{"name": "bill", "val": 28}, {"name": "kevin", "val": 46}, {"name": "ryan", "val": 23},{"name": "ville", "val": 56}]
私のY軸には周波数値があり、xaxisにはユーザー名があります。私は私の配置機能は正しいと思いますが、新しい列を追加するとき（オフセットは同じにしておきますが）、すべての列がずれています。目的は、列（新しいデータ）を追加し、適切なユーザー名の上に列（rect）を保持できるようにすることです。私はバーrect要素を含むg要素とテキスト要素のdxとdy属性の位置属性にいくつかの調整を行っている
<html>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="data/json" src="data.json"></script>
<style>
#chart rect{
fill: #4aaeea;
}
#chart text{
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
.axis text{
font: 10px sans-serif;
}
.axis path, .axis line{
fill: none;
stroke : #fff;
shape-rendering: crispEdges;
}
body{
background: #1a1a1a;
color : #eaeaea;
padding : 5px;
}
</style>
</head>
<body>
<div id="chart"</div>
<script>
var margin ={top:20, right:30, bottom:30, left:40},
width=960-margin.left - margin.right,
height=500-margin.top-margin.bottom;
// scale to ordinal because x axis is not numerical
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
//scale to numerical value by height
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
.append("svg") //append svg element inside #chart
.attr("width", width+(2*margin.left)+margin.right) //set width
.attr("height", height+margin.top+margin.bottom); //set height
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom"); //orient bottom because x-axis will appear below the bars
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var data;
d3.json("http://localhost:8000/data.json", function(error, data){
if (error) return console.warn(error);
x.domain(data.map(function(d){ return d.name}));
y.domain([0, d3.max(data, function(d){return d.val})]);
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i){
return "translate("+x(d.name)+", 0)";
});
console.log(margin.left);
bar.append("rect")
.attr("y", function(d) {
return y(d.val);
})
.attr("x", function(d,i){
return x(margin.left + 2);
})
.attr("height", function(d) {
return height - y(d.val);
})
.attr("width", Math.min.apply(null, [x.rangeBand()-2, 100]));
//.attr("width", x.rangeBand()); //set width base on range on ordinal data
bar.append("text")
.attr("x", (margin.left * 2.2))
.attr("y", function(d) { return y(d.val) })
.attr("dy", ".75em")
.text(function(d) { return d.val; });
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+margin.left+","+ height+")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+margin.left+",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
});
function type(d) {
d.name = +d.name; // coerce to number
return d;
}
</script>
私は順序尺度が 'domain' ...多分' .domainを（data.map（機能（D）{戻りd.nameを;}））が必要と思いましたか '？ – tarulen
また、あなたの型関数は役に立たない（そして、それはあなたがそれを呼び出すとあなたのデータから名前を単純に消すだろう） – tarulen
@tarulenそれから、私はその関数を削除しました - それを指摘してくれてありがとう！私はjsonの権利のために私のロード関数ですべての私のd3コードをラップしますか？ – confusedandamused