0
d3を使用して特定の範囲のランダムに生成されたデータから棒グラフをレンダリングするFlaskアプリケーションの中にJavaScriptがあります。ラベルや値で昇順または降順に並べ替えることができます。並べ替えは、値の昇順で並べ替える場合を除いて、すべての状況でうまく機能します。ほとんどの時間は、少なくとも2つのバーが正しい順序ではありません。昇順で並べ替えた後、バーグラフの間違った場所にいくつかのバーが表示される
コードを調べると、これらのバーの 'x'のd3属性が正しく設定されていないため、x軸の間違った場所に表示されているようです。私はそれがJavaScriptの問題ではなく、フラスコの問題ではなく、残りの部分が動作する必要があると思うが、私はそれを把握しているように見えることはできません。
データ生成（元のコードではPythonで行われますが、私はここにjiphyとJSでそれを生成した）：
function data_bar_graph(num=32) {
data_min = 0.0;
data_max = 100.0;
output = [];
for (i in range(int(num))) {
output.push(dict(label=str(uuid.uuid4())[:2], value=random.uniform(data_min, data_max)));
return output;
}
}
問題のJSファイル：https://jsfiddle.net/turtles_/bk3svowo/私は以来（それが正常に動作しません。フラスコ外のjsfiddleでデータを渡したりグラフを生成する方法がわからないのですが、コードを見ることができます。このように抽象的すぎる場合、データの受け渡しを試みます。
EDIT：エラーは次のセグメントのどこかにあることを約95％確信しています（xは時々間違っています、残りの値は正しくソートされるので、.attr（ "x"は何か奇妙な。次は正しいように見えるのか？
data = data.sort(sortComparator);
// Map x-axis labels
xScale.domain(
data.map(function(d)
{
return d.label;
}
));
// Map y-axis values
yScale.domain([0, d3.max(data,
function(d)
{
return d.value;
}
)]);
// Draw the axes
drawAxisLines(chart.g, xAxis, yAxis, computedHeight, 0, 0, 0);
var bars = chart.g.append("g")
.attr("class", "bars")
.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("x",
function(d)
{
return xScale(d.label);
}
)
.attr("y",
function(d)
{
return yScale(d.value);
}
)
.attr("fill",
function(d)
{
return colours(d.label);
}
)
.attr("height",
function(d)
{
return computedHeight - yScale(d.value);
}
)
.attr("width", xScale.rangeBand())
.style(cssStyling.bar);
}
sortComparatorが言及されたd3.ascending/d3.descendingです。