dimplejs散布図の結果が間違っています

user1940350

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が間違っています(私はそれが何であるかわかりません)?

ここに画像の説明を入力してください

ジョン・キルナンダー

Dimpleは、addSeriesメソッドの最初のパラメーターに基づいてデータを集約します3つの値を持つ「カテゴリ」に合格したため、合計値で3つのバブルが作成されます。代わりに、カテゴリ別に色分けされた車両ごとのバブルが必要な場合は、次のことを試すことができます。

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

軸の単位を変更するには、axis.tickFormatを使用できますが、上記の変更によりスケールが縮小されるため、必要がない場合があります。

データの値に基づいてバブルサイズを制御するには、「z」軸を追加する必要があります。この例を参照してください

散布図に別のマーカーサイズを設定したい場合は、次のように描画メソッドを呼び出した後で設定できます。

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

注意。このための組み込みプロパティは、次のリリースに含まれる予定です。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

(matplotlib.pyplot)散布図軸の順序が間違っています

分類Dev

MySQLの結合が間違っています結果

分類Dev

eulerProjectの関数の結果が間違っています

分類Dev

MDX結果の合計が間違っています

分類Dev

ElasticSearch結果のスコアが間違っています

分類Dev

Application.Sumの結果が間違っています

分類Dev

NSDateFormatter dateFromStringの結果が間違っていますか?

分類Dev

!dumpheapの結果が間違っています

分類Dev

Python math.arctan()の結果が間違っていますか?

分類Dev

usort関数の結果が間違っています

分類Dev

Valgrindを使用したlongdoubleのstd :: fpclassifyの結果が間違っています

分類Dev

Haskell repa:2つの配列の内積結果が間違っています

分類Dev

Pythonを使用したGoogleScrapeの結果の数が間違っています

分類Dev

PHPのarray_count_valuesの結果が間違っています

分類Dev

phpでxpathを使用すると、結果の数が間違っています

分類Dev

ElasticsearchMatchQueryが間違った結果を返しています

分類Dev

Objective-Cでは、fabsf()の結果タイプが間違っています

分類Dev

Conv2dTensorflowの結果が間違っています-精度= 0.0000e + 00

分類Dev

タイムデルタ操作の結果が間違っています

分類Dev

hash_djb2 PHPの結果が間違っていますか?

分類Dev

setIntervalによる関数の結果が間違っています

分類Dev

Oracleの "order by"句は、結果を間違った順序で返すか、結果が欠落しています

分類Dev

D3散布図の凡例が重なっています

分類Dev

クエリ結果でのHibernate結合継承のタイプが間違っています

分類Dev

グループ連結の問題、結果は間違っています

分類Dev

2つの日付を比較するJavascriptの結果が間違っている

分類Dev

SortBy Valuesの結果が間違っているのはなぜですか?

分類Dev

検索結果テーブルから移動するときのUIBarButtonItemの位置が間違っています

分類Dev

PHP / MYSQLクエリの結果がなく、エンコードが間違っていますか?

Related 関連記事

  1. 1

    (matplotlib.pyplot)散布図軸の順序が間違っています

  2. 2

    MySQLの結合が間違っています結果

  3. 3

    eulerProjectの関数の結果が間違っています

  4. 4

    MDX結果の合計が間違っています

  5. 5

    ElasticSearch結果のスコアが間違っています

  6. 6

    Application.Sumの結果が間違っています

  7. 7

    NSDateFormatter dateFromStringの結果が間違っていますか?

  8. 8

    !dumpheapの結果が間違っています

  9. 9

    Python math.arctan()の結果が間違っていますか?

  10. 10

    usort関数の結果が間違っています

  11. 11

    Valgrindを使用したlongdoubleのstd :: fpclassifyの結果が間違っています

  12. 12

    Haskell repa:2つの配列の内積結果が間違っています

  13. 13

    Pythonを使用したGoogleScrapeの結果の数が間違っています

  14. 14

    PHPのarray_count_valuesの結果が間違っています

  15. 15

    phpでxpathを使用すると、結果の数が間違っています

  16. 16

    ElasticsearchMatchQueryが間違った結果を返しています

  17. 17

    Objective-Cでは、fabsf()の結果タイプが間違っています

  18. 18

    Conv2dTensorflowの結果が間違っています-精度= 0.0000e + 00

  19. 19

    タイムデルタ操作の結果が間違っています

  20. 20

    hash_djb2 PHPの結果が間違っていますか?

  21. 21

    setIntervalによる関数の結果が間違っています

  22. 22

    Oracleの "order by"句は、結果を間違った順序で返すか、結果が欠落しています

  23. 23

    D3散布図の凡例が重なっています

  24. 24

    クエリ結果でのHibernate結合継承のタイプが間違っています

  25. 25

    グループ連結の問題、結果は間違っています

  26. 26

    2つの日付を比較するJavascriptの結果が間違っている

  27. 27

    SortBy Valuesの結果が間違っているのはなぜですか?

  28. 28

    検索結果テーブルから移動するときのUIBarButtonItemの位置が間違っています

  29. 29

    PHP / MYSQLクエリの結果がなく、エンコードが間違っていますか?

ホットタグ

アーカイブ