Svg(多个)标记不出现在chrome浏览器

Svg(Mulitple) Marker not appearing in chrome browser

本文关键字:chrome 浏览器 多个 Svg      更新时间:2023-09-26

我必须在我的条形图中显示两个svg标记。在mozilla下面的代码工作得很好,它显示两个标记,但当我在chrome浏览器中尝试它不显示。只有一个标记出现了。

这里是小提琴- 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();
                }
        }

请告诉我为什么?

向dom添加一个名为defs1:

的元素
svg.append("defs1");

这不是一个有效的SVG元素。我不知道你在这里想做什么但你应该使用group元素:

svg.append("g");