【发布时间】：2016-04-29 18:22:49
【问题描述】：
我正在尝试从运行良好的 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 上的该文件中读取数据，而不是对其进行硬编码 - 怎么做？
--> 这可能与文件的大小对于 svg 的边界而言太大有关吗？我有点怀疑，因为我一直在尝试使用 Germany.csv 文件的一小部分并遇到同样的问题。
有人告诉我，可以使用变量来操纵数据，就像我在上面的第一个示例中所做的那样：
var data;
d3.csv("nameOfCsv.csv", function(thisData) {
data = thisData;
}
但事实上，代码 sn-p 不起作用，对于初学者来说，它缺少 )，而且我以前从未得到过类似的工作 - 所以 - 我不确定这是一种合理的方式去。
--------
更新 @MauricioPoppe 解决了这个问题，但是尺寸有点不稳定，有没有办法让动态看起来更好，也许用 css 或其他东西？
【问题讨论】：
-
不，这是不对的，因为我可以通过
console.log(data);看到它。如果我确切地知道它不起作用，我就不会发布这个问题 -
@JSBob，嗨伙计- 抱歉有点... snarky，我在编程时感到非常沮丧！哈哈-但我喝了点茶，我发布了一个更完整的问题描述。