使用 SVG 和 Javascript 绘制 windBarbs

Question

我是 svg newbie.I 需要用 jquery 在 svg 中绘制风箭头。我找到了一些用 d3 here 绘制风箭的代码。我将其转换为 jquery 兼容形式。 Here is jsfiddle example. 但它不起作用。有人可以帮忙吗？

这里是 jquery 代码：

$(function () {

var WindBarbArrowHandler = {

    WindArrow: function (speed, direction, container, arrowWidth) {
    'use strict';
    var index = 0,
        i;

    this.speed = speed;
    this.direction = direction;
    this.trigDirection = direction + 90;
    this.scale = arrowWidth / 8;

    this.ten = 0;
    this.five = 0;
    this.fifty = 0;


    // Create the canvas
    $(container).append(
                            $('<svg></svg>')
                                .attr({ height: 2 * arrowWidth, width: 2 * arrowWidth })
                       );
    $("svg", container).append('<defs></defs>');
    $("defs", container).append($('<clipPath></clipPath>').attr('id', 'clip'));
    $("clipPath", container).append($('<rect></rect>')
                                    .attr({ height: 2 * arrowWidth, width: 2 * arrowWidth }));

    // Draw the widget area    
    $("svg", container).append($('<g></g>').attr('class', 'wind-arrow'));

    this.widget = $("svg", container);

    if (this.speed > 0) {
        // Prepare the path
        this.path = "";
        if (this.speed <= 7) {
            // Draw a single line
            this.longBar();
            index = 1;
        } else {
            this.shortBar();
        }

        // Find the number of lines in function of the speed
        this.five = Math.floor(this.speed / 5);
        if (this.speed % 5 >= 3) {
            this.five += 1;
        }

        // Add triangles (5 * 10)
        this.fifty = Math.floor(this.five / 10);
        this.five -= this.fifty * 10;
        // Add tenLines (5 * 2)
        this.ten = Math.floor(this.five / 2);
        this.five -= this.ten * 2;

        // Draw first the triangles
        for (i = 0; i < this.fifty; i++) {
            this.addFifty(index + 2 * i);
        }
        if (this.fifty > 0) {
            index += 2 * (this.fifty - 0.5);
        }

        // Draw the long segments
        for (i = 0; i < this.ten; i++) {
            this.addTen(index + i);
        }
        index += this.ten;

        // Draw the short segments
        for (i = 0; i < this.five; i++) {
            this.addFive(index + i);
        }

        this.path += "Z";

        // Add to the widget

        this.widget.append($('<g></g>'));

        $("g", this.widget).append($('<path></path>').attr({
            'd': this.path,
            'vector-effect': 'non-scaling-stroke',
            'transform': 'translate(' + arrowWidth + ', ' + arrowWidth + ') scale(' + this.scale + ') rotate(' + this.trigDirection + ' ' + 0 + ' ' + 0 + ')  translate(-8, -2)',
            'class': 'wind-arrow'
        }));
    } 

},

shortBar: function () {
    // Draw an horizontal short bar.
    'use strict';
    this.path += "M1 2 L8 2 ";
},

longBar: function () {
    // Draw an horizontal long bar.
    'use strict';
    this.path += "M0 2 L8 2 ";
},
addTen: function (index) {
    // Draw an oblique long segment corresponding to 10 kn.
    'use strict';
    this.path += "M" + index + " 0 L" + (index + 1) + " 2 ";
},
addFive: function (index) {
    // Draw an oblique short segment corresponding to 10 kn.
    'use strict';
    this.path += "M" + (index + 0.5) + " 1 L" + (index + 1) + " 2 ";
},
addFifty: function (index) {
    // Draw a triangle corresponding to 50 kn.
    'use strict';
    this.path += "M" + index + " 0 L" + (index + 1) + " 2 L" + index + " 2 L" + index + " 0 ";
},

 };


 WindBarbArrowHandler.WindArrow(30,45, $("#windBarbArrow"), 40);

 });

和 html 代码如下所示：

<div id="windBarbArrow"></div>

Answer 1

只需使用d3，您将永远不会回头。

如果您一心想jQuery，那有一个烦人的gotcha。

归根结底就是代码中动态创建 SVG 元素的任何位置：

$('<g></g>')

改为：

$(document.createElementNS('http://www.w3.org/2000/svg', 'g'))

这是你的code updated and working。

使用 SVG 和 Javascript 绘制 windBarbs

Draw windBarbs with SVG and Javascript

html

javascript

jquery

svg

d3.js