D3.js D3垂直线图

我有一个直线（面积）图，当水平时，它可以正常工作。但我真的需要它垂直，站起来。我尝试了对现有代码的各种更改。大部分都有一些奇怪的结果

这是代码（稍加修改）。有没有办法改变它使图表垂直

var x = d3.scale.linear().domain([1, itemCount]).range([0, width]);
var y = d3.scale.linear().domain([0, maxValue]).rangeRound([height, 0]);

// Set up linar x and y axis.
var xAxis = d3.svg.axis().scale(x).ticks(10);
var yAxis = d3.svg.axis().scale(y).ticks(2).orient("left");

// Line graph.
line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
        return x(d.x);
    })
    .y(function (d) {
        return y(d.y);
    });

    // Create SVG element.
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    // X-Axis, to bottom.
    svg.append("svg:g")
        .attr("class", "axis")
        .attr("transform", "translate(1," + height + ")")
        .call(xAxis);

    //Y-Axis
    svg.append("svg:g")
        .attr("class", "axis")
        .attr("transform", "translate(40, 1)")
        .call(yAxis);

    // Horizontal axis guide lines.
    svg.selectAll("line.y")
        .data(y.ticks(5))
        .enter()
        .append("line")
        .attr("x1", 0)
        .attr("x2", width)
        .attr("y1", y)
        .attr("y2", y)
        .style("stroke", "#000000")
        .style("stroke-opacity", 0.1);

    // Vertical axis guide lines.
    svg.selectAll("line.x")
        .data(y.ticks(5))
        .enter()
        .append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", 0)
        .attr("y2", this.heightInside - pushDown)
        .style("stroke", "#000000")
        .style("stroke-opacity", 0.1);

    // Set up domains. Nice ensures the domains ends on nice round values.
    x.domain([dataValues[0].x, dataValues[dataValues.length - 1].x]).nice();
    y.domain([d3.min(dataValues, function (d) { return (d.y); }),
              d3.max(dataValues, function (d) { return (d.y); })])
      .nice();

    // Draw line on graph.
    svg.append("svg:path")
        .attr("class", "line")
        .attr("d", line(dataValues))
        .style("stroke", function(d) { return colors[i]; });

    // Marks.
    svg.selectAll("circle_" + i)
        .data(dataValues)
        .enter()
        .append("circle")
        .style("fill", function(d) { return _this.colors[i]; })
        .attr("r", 4)
        .attr('cx', function (d) { return x(d.x); })
        .attr('cy', function (d) { return y(d.y); });

---

您能提供一些示例数据或示例吗？基本上，您所要做的就是交换生成元素的x和y坐标。我花了一些时间来弄清楚如何使JSFIDLE工作，但当我在JSFIDLE中做了一个示例后，我知道如何使其垂直。@Rune我知道这是一篇老文章，但是，你是否碰巧有让它工作的要点或类似的代码？这个问题还没有回答，我也很感兴趣