在d3

Question

我正在尝试将条形的起点映射到d3中y序号轴上的某些点，并且它似乎无法识别域中提供的名称。最终，我希望图表看起来像这样：

这是我到目前为止所得到的（我只提供了一些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"。

我不确定如何格式化语句以使其正确映射到我的序数。另外，我的条形似乎实际上并没有映射到我提供的十六进制代码，但我现在更关心序数轴。我试图根据建议here来处理我的x轴起点但是我很难用它来计算我是否将起始位置嵌入到实际的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
}