Question

您好我想在地图上用2个形状展示我的圆点：circle和rectangle。我使用过滤器将我的数据分成两部分：equal to 1或equal to 0。但我只能展示圈子。

我只能展示1个矩形，但我的数据有很多行可以满足条件。我看到矩形的坐标是我数据的最后一行。也许过滤器使文件的指针转到最后一个位置？怎么了？你们能指出我的问题吗？

我的代码

// draw  circle dots
  svg.selectAll(".dot")
      .data(data).enter()
      .append("circle")
       .filter(function(d) { return d.class ==0})
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", xMap)

      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));})
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d.class1 + "<br/> (" + xValue(d)
            + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });
//Draw rectangle dot

svg.selectAll(".rec")
    .data(data).enter().append("rect")
     .filter(function(d) { return d.class ==1})
    .attr("class", "rec")
    .attr("cx", xMap)
    .attr("cy", yMap)
    .attr("height", 30)
    .attr("width", 30)
    .style("fill", function(d) { return color(cValue(d));})
    .on("mouseover", function(d) {
        tooltip.transition()
             .duration(200)
             .style("opacity", .9);
        tooltip.html(d.class1 + "<br/> (" + xValue(d)
        + ", " + yValue(d) + ")")
             .style("left", (d3.event.pageX + 5) + "px")
             .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function(d) {
        tooltip.transition()
             .duration(500)
             .style("opacity", 0);
    });

我的data.csv

tree    house   class   class1

    0.12804 0.25792 0   B
    0.14595 0.33472 0   B
    0.23117 0.48474 0   C
    0.088995    0.25033 0   B
    0.12231 0.40285 0   C
    0.14204 0.28154 0   B
    1.0284  0.02235 0   A
    0.023085    0.38046 0   B
    0.074772    0.43056 0   C
    -0.046482   0.19074 0   B
    0.10548 0.11783 0   B
    0.21276 0.20738 0   B
    -0.064076   0.089246    0   A
    -0.029258   0.48967 0   C
    0.1851  0.20177 0   B
    0.029084    0.11508 1   B
    0.10206 0.27658     1    B
    0.11558 0.20622    1     B
    0.15363 0.29544    1       B
    -0.40068    0.94515 1   E
    0.057977    0.26218 1   B
    0.089279    0.39531 1   B

如何在d3 javascript上绘制多个形状

0 个答案: