Question

我正在创建水平条形图，以动态显示CSV文件中的数据。我正在获得一个额外的空间来放置另一个值，但是没有任何数据。我只想要排名前10位的值（学生）和键（县），它看起来像是加了一个。

Horizontal Bar chart image

如您所见，它在顶部添加了一个空间和一个小矩形。我只想删除两者。

    // Parse Data
    d3.csv("FA18_geographic.csv", function(data) {  

        data.sort(function(a,b) {
          return d3.descending(+a.students, +b.students);
        });


        // find max county
        var max = d3.max(data, function(d) { return +d.students;} );

        var map = d3.map(data, function(d){return d.students; });
        pmax = map.get(max);



        // Add X axis
        var x = d3.scaleLinear()
        .domain([0, +pmax.students+500])
        .range([ 0, width]);
        svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")
          .attr("transform", "translate(-10,0)rotate(-45)")
          .style("text-anchor", "end");


        // Y axis
        var count = 0
        var y = d3.scaleBand()
        .range([ 0, height ])
        .domain(
            data.map(function(d) { //only show top 10 counties
                count = count+1
                if (count<=10){
                return d.county;
             }})
            )
        .padding(.3);
        svg.append("g")
        .call(d3.axisLeft(y));



        //Bars                      //Something must be wrong in here???
        svg.selectAll("rect.bar")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", x(0) )
        .attr("y", function(d) { return y(d.county); })
        .attr("width", function(d) { return x(d.students); })
        .attr("height", y.bandwidth() )
        .attr("fill", "#79200D");

    });

</script>

Answer 1

您的问题就在这里

.domain(data.map(function(d) { //only show top 10 counties
    count = count + 1
    if (count <= 10) {
        return d.county;
    }
}))

这里的问题与D3无关，这是一个JavaScript问题：您不能使用Array.prototype.map跳过交互。

让我们在下面的基本演示中对此进行展示，在该示例中，我们仅在count小于5的情况下才尝试返回该项目：

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let count = -1;

const domain = data.map(function(d) {
  count += 1;
  if (count < 5) {
    return d
  };
});

console.log(domain)

如您所见，它将返回几个undefined。您只会看到一个空勾，因为D3频段标度将所有这些值视为一个undefined（频段标度中的域值是唯一）。

这里有几种解决方案。例如，您可以使用Array.prototype.reduce：

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let count = -1;

const domain = data.reduce(function(acc, curr) {
  count += 1;
  if (count < 5) {
    acc.push(curr)
  };
  return acc;
}, []);

console.log(domain)

或者，您可以在filter之后使用map，甚至可以使用forEach来填充数组。

最后，一些技巧：

您不需要count，因为Array.prototype.map具有索引（第二个参数），就像Array.prototype.reduce（第三个参数）一样。
您无需执行count = count + 1，只需执行count += 1;
您正在跳过第一个元素，因为JavaScript数组基于零。因此，以count而不是-1的身份开始0。

水平条形图索引已关闭

1 个答案: