Gibt es eine Möglichkeit, Instanzen einfach auf einer Achse in d3 oder dimple anzuzeigen?

Question

Meine Idee ist eine addCategoryAxis("x", '"loc"'); wie "Berlin, Deutschland" zu haben und dann die Instanzen von Jobs zu zählen, die an dieser Stelle aufgelistet sind, also zum Beispiel möchte ich etwas hinzufügen, das einem chart.addMeasureAxis("y", '"title"'; ähnlich ist, aber eigentlich kümmert es mich nicht Wert von '"title"' ist, möchte ich nur zählen, wie oft dort etwas auftaucht.

Im Moment ich bin mit Dimple, und ich habe über die API Informationen gelesen, sagt es ich etwas tun kann, Spoiler Warn- dies durchaus nicht * funktioniert:

// 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 

* Mit dem Fehler Uncaught TypeError: Cannot read property '_hasCategories' of null.

Hat jemand eine Idee, wie dies mit Dimple oder D3 erreicht werden kann?

Dies ist nur ein Spielzeug-Datensatz, der ein Simulakrum meiner echten Datendatei ist, aber es ist als ein in sich geschlossener Testmechanismus nützlich.

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

Answer 1

So in der Frage, die ich hatte:

var x = chart.axes.push(new dimple.axis(chart, "x", '"loc"', null)); 

var y = chart.axes.push(new dimple.axis(chart, "y", null, '"title"')); 

Ich änderte dies:

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

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

Und es funktionierte. Aktualisierter Code:

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