Map-Leiste zu y Ordinalachse in d3

Question

Ich versuche, den Anfang von Balken zu bestimmten Punkten auf einer y Ordinalachse in d3 abzubilden, und es scheint nicht die Namen in der Domäne zu erkennen. Letztendlich würde ich das Diagramm mag so aussehen:

Das ist, was ich bisher bekommen habe (ich habe nur ein wenig von der json vorgesehen, weil es sonst sehr groß sein würde):

var margin = {top: 50, right: 150, bottom: 50, left: 150}, 
     w = 3000 - margin.left - margin.right, 
     h = 500 - margin.top - margin.bottom; 

    d3.json("test_chart.json", function(json) { 

     var data = json.items; 


     var x = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d.starting_line + d.duration; })]) 
     .range([0, w]); 

     var y = d3.scale.ordinal() 
     .domain(["Rome","Magdalene Castle","Herod's Palace","Pilate's Palace","King of the World's Stage","King of Flesh's stage","Stage Above Hell","Tavern","Arbor","Simon the Leper's House","Lazarus' tomb","Palace of the King of Marseilles","Sepulchre","Heathen Temple","Heaven","The Ship","The mountain","Wilderness","The priest's cell","Jherusalem","Marseilles","Hellmouth","The Place","The Lodge","The Stations","The Cloud"]) 
     .rangeBands([0, h]); 

     var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

     var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

     var svg = d3.select("body").append("svg") 
     .attr("width", w + margin.left + margin.right) 
     .attr("height", h + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


     var bars = svg.selectAll(".bar") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("class", function(d, i) {return "bar " + d.label;}) 
      .attr("x", function(d, i) {return d.starting_line;}) 
      .attr("y", function(d, i) {return d.location;}) 
      .attr("width", function(d, i) {return d.duration}) 
      .attr("height", 10) 
      .style("fill", function(d,i) {return d3.rgb(d.color)}); 

     svg.append("g") 
     .attr("class", "y axis") 
     .attr("class", "x axis") 
     .call(xAxis) 
     .call(yAxis) 
     .call(bars); 

     // bars 
     var bars = svg.selectAll(".bar") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("class", function(d, i) {return "bar " + d.label;}) 
      .attr("x", function(d, i) {return d.starting_line;}) 
      .attr("y", function(d, i) {return d.location;}) 
      .attr("width", function(d, i) {return d.duration}) 
      .attr("height", 10) 
      .style("fill", function(d,i) {return d3.rgb(d.Color)}); 

    }); 

Und meine Probe json ist hier:

{"items":[{"character":"Inperator","color":"CC6600","location":"Rome","starting_line":"1","duration":"19"},{"character":"Serybyl","color":"660066","location":"Rome","starting_line":"20","duration":"1"},{"character":"Inperator","color":"3300FF","location":"Rome","starting_line":"21","duration":"9"},{"character":"Provost","color":"660066","location":"Rome","starting_line":"30","duration":"1"},{"character":"Inperator","color":"CC6600","location":"Rome","starting_line":"31","duration":"11"}]} 

Das Problem, das ich in ist ausgeführt habe, dass meine .attr("y", function(d, i) {return d.location;}) Anweisung die folgende Fehlermeldung erzeugt: Error: Invalid value for <rect> attribute y="Rome".

Ich bin mir nicht sicher, wie ich die Anweisung formatieren muss, damit sie meiner Ordinalskala richtig zugeordnet wird. Außerdem scheinen meine Balken nicht wirklich den Hex-Codes zuzuordnen, die ich zur Verfügung stelle, aber ich mache mir mehr Sorgen um die Ordinalachse im Moment. Ich habe versucht, mit meinem X-Achse Startpunkt auf der Grundlage der Beratung here zu handhaben, aber ich hatte eine harte Zeit damit und dachte, wenn ich den Startort in der tatsächlichen JSON einbetten, könnte ich dem Standardmodell folgen. Jeder Ratschlag, den Sie mir geben könnten, wäre sehr willkommen.

Answer 1

Sie benötigen eine Skala anrufen und den Ort passieren, damit es die Umwandlung tun können:

.attr("y", function(d, i) { 
    return y(d.location); //<-- your y-scale is a function, that takes the ordinal "name" and returns a pixel value 
}