chrome 浏览器中未出现 Svg（多个）标记

Question

我必须在我的条形图中显示两个 svg 标记。在 mozilla 中，下面的代码工作正常，它显示了两个标记，但是当我在 chrome 中尝试时，它没有显示。只有一个标记出现。

这里是 fiddle - http://jsfiddle.net/keshav_1007/f4warsnu/2/

    var yMax = 520; // overriding y axis
            var score=8000/100;
            var svg = dimple.newSvg("#chartContainer", 600, 600);
            var data = [{
                "Brand":"A", 
                "Day":"Mon", 
                "SalesVolume":100 },
                { 
                "Brand":"B", 
                "Day":"Mon", 
                "SalesVolume":200 }];
            var myChart = new dimple.chart(svg, data);
            <!-- console.log(data[1].Brand,data[1].SalesVolume); -->
            myChart.setBounds(100, 50, 300, 300)
            var x = myChart.addCategoryAxis("x", "Day");
            var y = myChart.addMeasureAxis("y", "SalesVolume");
            y.overrideMax = yMax;
             y.addOrderRule("SalesVolume");
            var s = myChart.addSeries("Brand", dimple.plot.bar);
            s.barGap=0.7;
            myChart.addLegend(120, 400, 300, 30, "left");

            s.addEventHandler("mouseover", onHover);

            s.addEventHandler("mouseleave", onLeave); 

            myChart.draw();

            d3.selectAll("rect").on("mouseover", null);
            s.shapes.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, s); });
            var defs = svg.append("defs");
            defs.append("marker")
            .attr("id", "triangle-start")
            .attr("viewBox", "-5 -5 10 10")
            .attr("refX", -1)
            .attr("refY", 0)
            .attr("markerWidth", 10)
            .attr("markerHeight", 10)
            .attr("orient", "auto")
            .append("path")
            .

attr("class", "marker")
        .attr("d", "M 0 0 L 3 4 L 3 -4 z");

         svg.append("line")
        .attr("x1",205)
        .attr("x2", 295)
        .attr("y1", (y._scale(score)))
        .attr("y2",(y._scale(score)))
        .attr('stroke','black')
        .attr("marker-end", "url(#triangle-start)")
        .style("stroke-dasharray", "3");    

var defs1 = svg.append("defs1");
        defs1.append("marker")
        .attr("id", "triangle-start1")
        .attr("viewBox", "-5 -5 10 10")
        .attr("refX", -1)
        .attr("refY", 0)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("class", "marker")
        .attr("d", "M 0 0 L 3 4 L 3 -4 z");

         svg.append("line")
        .attr("x1",205)
        .attr("x2", 295)
        .attr("y1",200)
        .attr("y2",200)
        .attr('stroke','black')
        .attr("marker-start", "url(#triangle-start1)")
        .style("stroke-dasharray", "3");

        function onHover(e) {
            console.log("on enter");
            var cx = parseFloat(e.selectedShape.attr("x")),
                    cy = parseFloat(e.selectedShape.attr("y"));

                // Set the size and position of the popup
                var width = 150,
                    height = 70,
                    x = (cx + width + 10 < svg.attr("width") ?
                         cx + 10 :
                cx - width - 20);
                    y = (cy - height / 2 < 0 ?
                        15 :
                        cy - height / 2);

                // Create a group for the popup objects
                popup = svg.append("g");

                // Add a rectangle surrounding the text
                popup .append("rect")
                        .attr("x", x + 5)
                        .attr("y", y - 5)
                        .attr("width", 150)
                        .attr("height", height)
                        .attr("rx", 5)
                        .attr("ry", 5)
                        .style("fill", 'white')
                        .style("stroke", 'black')
                        .style("stroke-width", 2);
                // Add multiple lines of text
              var pos1 = d3.select("path").node().getTotalLength();
             console.log(pos1);
            var pos2 = d3.select("path").node().getPointAtLength(312)
                         console.log(pos2);
console.log(pos2.x);
console.log(pos2.y);
        }

        function onLeave(e) {
            console.log("on Leave");
            if (popup !== null) {
                    popup.remove();
                }

        }

请告诉我为什么？以及可以做什么。

Answer 1

您正在向名为 defs1 的 dom 追加一个元素：

svg.append("defs1");

这不是有效的 svg 元素。我不确定你想在这里做什么，但你应该改用组元素：

svg.append("g");

chrome 浏览器中未出现 Svg（多个）标记

Svg(Mulitple) Marker not appearing in chrome browser

javascript

svg

dimple.js