Question

我正试图从一个运行良好的Dimple / D3可视化的硬编码版本转换，以及从文件中读取数据的更“动态”版本，但是，我发现它很有问题。

这或多或少是我想要的：

为实现这一目标，以下代码可以完美地运行，即它可以生成您刚刚看到的图像：

<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>
</div>

<script>

console.log(data);

var svg = dimple.newSvg("#chartContainer", 1000, 1000);
var data = [
          { '"loc"': '"Hamburg, Deutschland"', '"title"': "CNC-Dreher/in" },
          { '"loc"': 'M?nchen (Kreis), Bayern', '"title"': "Data Scientist" },
          { '"loc"': '"D?sseldorf, Nordrhein-Westfalen"', '"title"': "Praktikant m|w" },
          { '"loc"': '"Rheinland-Pfalz, Deutschland"', '"title"': "Senior Softwareentwickler Logistikdienstleistung(w/m)" },
          { '"loc"': '"D?sseldorf, Nordrhein-Westfalen"', '"title"': "Projektmanager (m/w) Information Engineering" },
          { '"loc"': '"Grimma, Leipzig (Kreis)"', '"title"': "Softwareentwickler (m/w)" },
          { '"loc"': '"Hannover, Region Hannover (Kreis)"', '"title"': "Bauleiter (m/w)" },
          { '"loc"': '"M?nchen (Kreis), Bayern"', '"title"': "Backend Software Developer (m/f)" },
          { '"loc"': '"Ratingen, Mettmann (Kreis)"', '"title"': "Ausbildung Industriekaufmann (m/w)" },
          { '"loc"': '"Bayern, Deutschland"', '"title"': "Dualer Studiengang Bachelor of Arts (Fachrichtung Bank/Vertrieb) Bayern" },
          { '"loc"': '"Landshut, Landshut (Kreis)"', '"title"': "Spezialist CFK m/w" },
          { '"loc"': '"Frankfurt am Main, Hessen"', '"title"': "Data Analyst / Consultant analytisches CRM (m/w) f?r unseren Premium Partner EDEKA" },
          { '"loc"': '"Hamburg, Deutschland"', '"title"': "Produktmanager (m/w) im Bereich Privat Kraft" },
          { '"loc"': '"Unterf?hring, M?nchen (Kreis)"', '"title"': "Controller / Assistent der Gesch?ftsleitung" },
          { '"loc"': '"Berlin, Deutschland"', '"title"': "Projektmanager (m/w)" },
          { '"loc"': 'Royal Leamington Spa', '"title"': "SOFTWARE TEST ENGINEER / QA (m/w)" },
          { '"loc"': '"Lauf an der Pegnitz, N?rnberger Land (Kreis)"', '"title"': "Bilanzbuchhalter/in" },
          { '"loc"': '"Buchenb?hl, N?rnberg"', '"title"': "Inhouse Business Intelligence Berater (m/w)" },
          { '"loc"': '"Berlin, Deutschland"', '"title"': "Praktikant Vertriebscontrolling (m/w) f?r die Dauer von 6 Monaten (Pflichtpraktikum)" }
        ];
var chart = new dimple.chart(svg,data);
chart.setBounds(100, 100, 500, 300);

var x = chart.addCategoryAxis("x", '"loc"');
var y = chart.addMeasureAxis("y", '"title"');

var lines = chart.addSeries(["project"], dimple.bar, [x, y]);

lines.data = data;
lines.lineWeight = 5;
lines.lineMarkers = true;

chart.draw();

</script>

然而，当我尝试从外部文件（link to said file on my GitHub）加载数据时，这个文件要大得多，（与上面代码中的玩具数据具有非常相似的特征）我得到一个错误 - 事实上 - 我得到的地图基本上没有意义，这是可鄙的混乱的照片，接着是我一直在使用的最新迭代的代码：

在那一点"loc"未定义且"title"为0.0。

<!DOCTYPE html>


<html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>

<script type="text/javascript">
  function draw(data) {

  "use strict";
  var margin = 75,
      width = 9000 - margin,
      height = 600 - margin;

  var svg = d3.select("body")
              .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
              .append('g')
              .attr('class','chart');


  var chart = new dimple.chart(svg,data);
  chart.setBounds(100, 100, 500, 300);

  var x = chart.addCategoryAxis("x", '"loc"');
  var y = chart.addMeasureAxis("y", '"title"');

  var lines = chart.addSeries(["project"], dimple.bar, [x, y]);


  chart.draw();

  };

</script>

<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.csv("Germany.csv", draw);
  </script>
</body>

</html>

问题

正如您所看到的，我正在尝试做的只是从我的GitHub上的该文件中读取数据而不是硬编码 - 如何做到这一点？

- ＆GT;这可能与文件的大小对于svg的边界太大有关吗？我有点怀疑它，因为我一直在尝试使用Germany.csv文件的小子集并遇到同样的问题。

我曾被告知可以使用变量操作数据，就像我上面的第一个例子所做的那样，例如：

var data;

d3.csv("nameOfCsv.csv", function(thisData) {
      data = thisData;
    }

但实际上代码片段不起作用，对于初学者来说它缺少)，我以前从来没有得到过类似的东西 - 所以 - 我不确定它是否合理去。

--------------------

更新 @MauricioPoppe解决了它，但是尺寸有点不稳定，有没有办法让动态看起来更好，可能还有css或其他东西？

Answer 1

您的csv显示每个字段都包含在单个空格内，因此而不是

var x = chart.addCategoryAxis("x", '"loc"');
var y = chart.addMeasureAxis("y", '"title"');

你应该使用

var x = chart.addCategoryAxis("x", ' "loc" ');
var y = chart.addMeasureAxis("y", ' "title" ');

function draw(data) {

  "use strict";
  var margin = 75,
    width = 9000 - margin,
    height = 600 - margin;

  var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin)
    .attr("height", height + margin)
    .append('g')
    .attr('class', 'chart');


  var chart = new dimple.chart(svg, data);
  chart.setBounds(100, 100, 500, 300);

  var x = chart.addCategoryAxis("x", ' "loc" ');
  var y = chart.addMeasureAxis("y", ' "title" ');

  var lines = chart.addSeries(["project"], dimple.bar, [x, y]);


  chart.draw();

};

d3.csv('https://raw.githubusercontent.com/s-matthew-english/bookish-adventure/master/data/Germany.csv', draw)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.1.1.min.js"></script>

d3.js和dimple，从文件中读取数据而不是硬编码

--------------------

1 个答案: