运用d3和d3_top实现折现的方法

昨天和今天一直在弄如何把折线倒置

// 模拟数据

var dataset = [

  {x: 0, y: 11}, {x: 1, y: 35},

  {x: 2, y: 23}, {x: 3, y: 78},

  {x: 4, y: 55}, {x: 5, y: 18},

  {x: 6, y: 98}, {x: 7, y: 100},

  {x: 8, y: 22}, {x: 9, y: 65}

];

// 创建x轴的比例尺(线性比例尺)

var xScale = d3.scale.linear()

    .domain(d3.extent(dataset, function (d) {

       return d.x;

    }))

    .range([0, width - padding.left - padding.right]);

// 创建y轴的比例尺(线性比例尺)

var yScale = d3.scale.linear()

    .domain([0, d3.max(dataset, function (d) {

       return d.y;

    })])

    .range([height - padding.top - padding.bottom, 0]);

// 创建x轴

var xAxis = d3.svg.axis()

    .scale(xScale)

    .orient( 'bottom' );

// 创建y轴

var yAxis = d3.svg.axis()

    .scale(yScale)

    .orient( 'left' );

// 添加SVG元素并与x轴进行“绑定”

main.append( 'g' )

    .attr( 'class' , 'axis' )

    .attr( 'transform' , 'translate(0,' + (height - padding.top - padding.bottom) + ')' )

    .call(xAxis);

// 添加SVG元素并与y轴进行“绑定”

main.append( 'g' )

    .attr( 'class' , 'axis' )

    .call(yAxis);

这次我们模拟了一些点的数据来进行折线的绘制。 d3.scale.linear() 创建了线性比例尺， linear.domain() 定义定义域， linear.range() 定义值域。这里需要注意一下，因为SVG画布的y轴与传统认知上的y轴的方向是反着来的，所以在定义y轴的定义域和值域对应关系时，也需要反着来。 d3.extent 可以得到参数数组中的最大值和最小值，并以数组的形式返回。然后用 d3.svg.axis() 创建了两个坐标轴，把比例尺应用到它们上面，并且用 axis.orient() 设置了坐标轴的刻度尺的方向。最后，添加SVG元素，用 call() 把定义好的坐标轴与SVG元素联系起来。通过设置它们的transform属性来移动元素，使它们看起来像是一个坐标系。

说白了就是把y轴的.range([])里面两个数组元素调换方向就可以了。

// Horizontal 创建x轴的比例尺(线性比例尺)

var x = d3.time.scale()

.range([padding, width - padding]);

// Vertical 创建y轴的比例尺(线性比例尺) 把height，5对掉，那么折线就会向下走

var y = d3.scale.linear()

.range([height, 5]);

原作的链接： http://www.jb51.net/article/93088.htm