D3垂直线图

Question

我有一条线（＆amp; area）图表，水平时可以正常工作。但我真的需要它是垂直的，站起来。我已尝试对现有代码进行各种更改。主要是有一些奇怪的结果。

这是代码（稍微修改了一下）。有没有办法改变它以使图表垂直？：

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