javascript - dimplejs 散点图中的结果错误

Question

我试图了解如何使用dimplejs，但结果不是我想要的。

JSFiddleCode

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
  d3.csv("carsData.csv", function (data) {

      // change string (from CSV) into number format
      data.forEach(function(d) {
        if(d["Sports Car"]==1)
            d.Category = "Sports Car";
        else if(d["SUV"]==1)
            d.Category = "SUV";
        else 
            d.Category = "Other";

        d.HP = +d.HP;
        d["Engine Size (l)"] = +d["Engine Size (l)"];

      });
    // Latest period only
    //dimple.filterData(data, "Date", "01/12/2012");
    // Create the chart
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 420, 330)

    // Create a standard bubble of SKUs by Price and Sales Value
    // We are coloring by Owner as that will be the key in the legend
    myChart.addMeasureAxis("x", "HP");
    myChart.addMeasureAxis("y", "Engine Size (l)");
    myChart.addSeries("Category", dimple.plot.bubble);

    var myLegend = myChart.addLegend(530, 100, 60, 300, "Right");
    myChart.draw();

    // This is a critical step.  By doing this we orphan the legend. This
    // means it will not respond to graph updates.  Without this the legend
    // will redraw when the chart refreshes removing the unchecked item and
    // also dropping the events we define below.
    myChart.legends = [];

    // This block simply adds the legend title. I put it into a d3 data
    // object to split it onto 2 lines.  This technique works with any
    // number of lines, it isn't dimple specific.
    svg.selectAll("title_text")
      .data(["Click legend to","show/hide owners:"])
      .enter()
      .append("text")
        .attr("x", 499)
        .attr("y", function (d, i) { return 90 + i * 14; })
        .style("font-family", "sans-serif")
        .style("font-size", "10px")
        .style("color", "Black")
        .text(function (d) { return d; });

    // Get a unique list of Owner values to use when filtering
    var filterValues = dimple.getUniqueValues(data, "Category");
    // Get all the rectangles from our now orphaned legend
    myLegend.shapes.selectAll("rect")
      // Add a click event to each rectangle
      .on("click", function (e) {
        // This indicates whether the item is already visible or not
        var hide = false;
        var newFilters = [];
        // If the filters contain the clicked shape hide it
        filterValues.forEach(function (f) {
          if (f === e.aggField.slice(-1)[0]) {
            hide = true;
          } else {
            newFilters.push(f);
          }
        });
        // Hide the shape or show it
        if (hide) {
          d3.select(this).style("opacity", 0.2);
        } else {
          newFilters.push(e.aggField.slice(-1)[0]);
          d3.select(this).style("opacity", 0.8);
        }
        // Update the filters
        filterValues = newFilters;
        // Filter the data
        myChart.data = dimple.filterData(data, "Category", filterValues);
        // Passing a duration parameter makes the chart animate. Without
        // it there is no transition
        myChart.draw(800);
      });
  });

散点图结果只有 3，我不知道为什么。x 是 HP，y 是马力。

更多问题:1.如何更改轴单位。2.如何控制每个气泡的大小。3.如何修正错误的结果。

结果图如下: csv 文件有 480 行。也许addseries是错误的(我不知道它是什么)？

Answer 1

Dimple 根据 addSeries 的第一个参数为您聚合数据。方法。您已经传递了“类别”，它有 3 个值，因此会创建 3 个带有求和值的气泡。如果您希望每辆车都有一个按类别着色的气泡，您可以尝试:

myChart.addSeries(["Vehicle Name", "Category"], dimple.plot.bubble);

要更改轴单位，您可以使用 axis.tickFormat尽管上述更改会缩小规模，因此您可能会发现不需要。

要根据数据中的值控制气泡大小，您需要添加“z”轴。请参阅this example .

如果您只想为散点图设置不同的标记大小，您可以在调用绘制方法后执行以下操作:

var mySeries = myChart.addSeries("Category", dimple.plot.bubble);
var myLegend = myChart.addLegend(530, 100, 60, 300, "Right");
myChart.draw();

// Set the bubble to 3 pixel radius
mySeries.shapes.selectAll("circle").attr("r", 3);

注意。下一个版本将包含为此目的的内置属性。