Question

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

<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.如何修复错误的结果。

继承人的结果图： enter image description here csv文件有480行。也许addseries是错的（我不知道它是什么）？

enter image description here

Answer 1

Dimple根据addSeries方法的第一个参数为您聚合数据。你已经通过＆＃34;类别＆＃34;它有3个值，因此产生3个带有求和值的气泡。如果您想要按类别划分每辆车的气泡，您可以尝试：

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

要更改轴单位，您可以使用axis.tickFormat，但上述更改会缩小比例，因此您可能会发现自己并不需要。

要根据数据中的值控制气泡大小，您需要添加＆＃34; z＆＃34;轴。请参阅this example。

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

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);

NB。内置属性将包含在下一个版本中。

在dimplejs散点图中导致错误的结果

1 个答案: