有没有一种方法可以简单地计算实例以显示在 d3 或 dimple 的轴上？
Is there a way to simply count instances to show on an axis in d3 or dimple?
我的想法是有一个 addCategoryAxis("x", '"loc"'); 例如 "Berlin, Deutschland" 然后计算在那个位置列出的工作实例，所以，例如我想添加一些类似于chart.addMeasureAxis("y", '"title"';，但我实际上并不关心 '"title"' 的值是多少，我只是想计算那里出现的次数。
目前我正在使用 Dimple，并且我一直在阅读 API 信息，它说我可以做这样的事情，剧透警报 - 这根本不起作用*：
// Add a Brand ordinal axis on "x"
myChart.axes.push(new dimple.axis(myChart, "x", '"loc"', null));
// Add a Sales Volume linear numerical axis on "y"
myChart.axes.push(new dimple.axis(myChart, "y", null, '"title"'));
// // Add a time axis on "x" for the date field
*错误Uncaught TypeError: Cannot read property '_hasCategories' of null.
有谁知道如何使用 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);
// Add a Brand ordinal axis on "x"
var x = chart.axes.push(new dimple.axis(chart, "x", '"loc"', null));
// Add a Sales Volume linear numerical axis on "y"
var y = chart.axes.push(new dimple.axis(chart, "y", null, '"title"'));
// // Add a time axis on "x" for the date field
var lines = chart.addSeries(["project"], dimple.bar, [x, y]);
lines.data = data;
lines.lineWeight = 5;
lines.lineMarkers = true;
chart.draw();
</script>
所以在我的问题中：
var x = chart.axes.push(new dimple.axis(chart, "x", '"loc"', null));
var y = chart.axes.push(new dimple.axis(chart, "y", null, '"title"'));
我将其更改为：
var x = chart.addCategoryAxis("x", '"loc"');
var y = chart.addMeasureAxis("y", '"title"');
它奏效了。更新代码：
<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);
// // Add a Brand ordinal axis on "x"
// var x = chart.axes.push(new dimple.axis(chart, "x", '"loc"', null));
// // Add a Sales Volume linear numerical axis on "y"
// var y = chart.axes.push(new dimple.axis(chart, "y", null, '"title"'));
// // // Add a time axis on "x" for the date field
// chart.addCategoryAxis("x", '"loc"');
// chart.addMeasureAxis("y", '"title"');
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>
我的想法是有一个 addCategoryAxis("x", '"loc"'); 例如 "Berlin, Deutschland" 然后计算在那个位置列出的工作实例，所以，例如我想添加一些类似于chart.addMeasureAxis("y", '"title"';，但我实际上并不关心 '"title"' 的值是多少，我只是想计算那里出现的次数。
目前我正在使用 Dimple，并且我一直在阅读 API 信息，它说我可以做这样的事情，剧透警报 - 这根本不起作用*：
// Add a Brand ordinal axis on "x"
myChart.axes.push(new dimple.axis(myChart, "x", '"loc"', null));
// Add a Sales Volume linear numerical axis on "y"
myChart.axes.push(new dimple.axis(myChart, "y", null, '"title"'));
// // Add a time axis on "x" for the date field
*错误Uncaught TypeError: Cannot read property '_hasCategories' of null.
有谁知道如何使用 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);
// Add a Brand ordinal axis on "x"
var x = chart.axes.push(new dimple.axis(chart, "x", '"loc"', null));
// Add a Sales Volume linear numerical axis on "y"
var y = chart.axes.push(new dimple.axis(chart, "y", null, '"title"'));
// // Add a time axis on "x" for the date field
var lines = chart.addSeries(["project"], dimple.bar, [x, y]);
lines.data = data;
lines.lineWeight = 5;
lines.lineMarkers = true;
chart.draw();
</script>
所以在我的问题中：
var x = chart.axes.push(new dimple.axis(chart, "x", '"loc"', null));
var y = chart.axes.push(new dimple.axis(chart, "y", null, '"title"'));
我将其更改为：
var x = chart.addCategoryAxis("x", '"loc"');
var y = chart.addMeasureAxis("y", '"title"');
它奏效了。更新代码：
<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);
// // Add a Brand ordinal axis on "x"
// var x = chart.axes.push(new dimple.axis(chart, "x", '"loc"', null));
// // Add a Sales Volume linear numerical axis on "y"
// var y = chart.axes.push(new dimple.axis(chart, "y", null, '"title"'));
// // // Add a time axis on "x" for the date field
// chart.addCategoryAxis("x", '"loc"');
// chart.addMeasureAxis("y", '"title"');
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>