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

Question

我正在尝试从效果很好的 Dimple/D3 可视化的硬编码版本过渡到从文件中读取数据的 "dynamic" 可视化，但是，我'我发现它很有问题。

这或多或少是我想要的：

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

<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 上的那个文件中读取数据，而不是对其进行硬编码 - 如何做到这一点？

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

我曾经被告知可以使用变量来操纵数据，就像我在上面的第一个示例中所做的那样，例如：

var data;

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

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

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

UPDATE @MauricioPoppe 解决了它，但是尺寸有点不稳定，有没有办法动态地让外观看起来更好，也许用 css 什么的？

Answer 1

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

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 和酒窝，从文件中读取数据而不是硬编码

d3.js and dimple, reading data in from a file rather than hard coded

d3.js

dimple.js

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