如何使用 d34raphael 重新创建 svg <line> 元素？答案

【问题标题】：How can I recreate svg <line> elements using d34raphael?如何使用 d34raphael 重新创建 svg <line> 元素？
【发布时间】：2023-03-27 08:58:03
【问题描述】：

我知道raphael 可以创建路径，但不能创建行。我知道d3 可以同时创建。

我想创建一个盒须图，类似于this one，但水平而不是垂直。我的 json 数据格式为：

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

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

这是最终目标的图片：

【问题讨论】：

标签： svg raphael d3.js

【解决方案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。

【讨论】：

到目前为止，我对路径的运气并不好，感谢您提供示例代码。我今天就试试，看看效果如何！
太棒了！我稍微编辑了这个函数，因为我喜欢更高的胡须，但它完美无缺。谢谢凯文！