Строка карты для оси ординалы y в d3

Question

Я пытаюсь отобразить начало баров в определенные точки на оси ординалы y в d3 и, похоже, не распознает имена, указанные в домене. В конце концов, я хотел бы диаграмму, чтобы выглядеть следующим образом:

Это то, что у меня до сих пор (я только при условии, немного в формате JSON, потому что это было бы огромным иначе):

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)}); 

    }); 

И мой пример JSON здесь:

{"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"}]} 

проблема я столкнулся в том, что мой .attr("y", function(d, i) {return d.location;}) оператор генерирует следующее сообщение об ошибке: Error: Invalid value for <rect> attribute y="Rome".

Я не уверен, как мне нужно отформатировать заявление, чтобы оно правильно отображалось в моей порядковой шкале. Кроме того, мои бары, по-видимому, не отображаются на шестнадцатеричные коды, которые я предоставляю, но меня больше беспокоит порядковая ось на данный момент. Я попытался обработать начальную точку оси x, основываясь на совете here, но мне было нелегко с этим, и я подумал, что если я вставляю исходное местоположение в фактическом json, я мог бы следовать более стандартной модели. Любой совет, который вы могли бы мне дать, будет очень благодарен.

Answer 1

Вам нужно позвонить своему масштабу и передать его местоположение, так что он может сделать преобразование:

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