javascript - 按升序排序后，条形图中的一些条形位于错误的位置

Question

我在 Flask 应用程序中有一些 javascript，它使用 d3 从特定范围内的一些随机生成的数据渲染条形图。它允许按标签或值按升序或降序排序。排序在任何情况下都可以正常工作，除非按值升序排序。大多数情况下，至少有 2 个条形的顺序不正确。

通过检查代码，问题似乎是这些条形的“x”d3 属性设置不正确，因此它们显示在 x 轴上的错误位置。我认为这一定是一个 javascript 问题而不是 Flask 问题，因为其余的都可以工作，但我似乎无法弄清楚。

数据生成(在原始代码中用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/ (它无法正常工作，因为我不确定如何在 Flask 之外的 jsfiddle 中传递数据或生成图形，但你可以看到代码。如果数据传递太抽象，我会尝试弄清楚数据传递，例如这个)。

编辑:我大约 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。

Answer 1

由于您没有有效的示例，因此很难确切地知道问题是什么，但这里通常存在陷阱:您很可能将数字作为字符串进行比较(例如 "12" < "2" ，而 12 > 2 ) )。

为了确保您正在比较数字，您可以执行以下操作:

data = data.sort(function(a,b) { return d3.ascending(+a.value, +b.value); })

在字段前面加上 + ，您正在将这些字段诱骗为数字(您的 Python 代码可能不会自动执行此操作)。