如何使用d34 raphael？</line>创建svg <line>元素

Question

我知道raphael可以创建路径，但不能创建线路。我知道d3可以创建两者。

我想创建一个类似于this one的盒子和须状图表，但是水平而不是垂直。我有以下形式的json数据：

{
    "lowestValue":"53",
    "lowerQuartile":"63",
    "medianValue":"73",
    "upperQuartile":"80",
    "highestValue":"99",
    "targetValue":"80"
},
...

如何使用d34raphael或纯raphael创建一个（或几个）方框和胡须图，以便在IE7 / IE8中正确显示？

以下是最终目标的图片：

Answer 1

路径是如此相似的原始状态，似乎很容易使用原始Raphael重新创建这样的图形（这似乎越来越像我的偏好）。考虑这样的效用函数：

function whisker( paper, x, y, width, height, data )
{
    var x1 = x + data.lowestValue * width / 100, x2 = x + data.highestValue * width / 100;
    var outer_range = paper.path( [ "M", x1, y + height * 0.25, "L", x1, y + height * 0.75, "M", x1, y + height / 2, "L", x2, y + height / 2, "M", x2, y + height / 4, "L", x2, y + height * 0.75 ] ).attr( { fill : 'none', stroke: 'gray' } );
    var inner_range = paper.rect( x + ( width * data.lowerQuartile / 100 ), y, width * ( data.upperQuartile - data.lowerQuartile ) / 100, height, 0 ).attr( { fill: 'lightgray', stroke: 'black' } );
    var median = paper.path( [ "M", x + width * data.medianValue / 100, y, "L", x + width * data.medianValue / 100, y + height ] ).attr( { fill: 'none', stroke: 'black' } );;
    var target = paper.circle( x + ( width * data.targetValue / 100 ), y + height / 2, height / 4 ).attr( { fill: 'black' } );
}

第六个参数只是你的json数据。当然，您需要增加每个晶须的y值。这是我网站上的code in action。