javascript - 如何仅增加 SVG 行的大小(宽度)

Question

我上面有一条线和一个标记。现在我只想增加线条的宽度而不是箭头。如果我给 stroke-width 两个线的大小和 markert 增加。

这是我的 fiddle :http://fiddle.jshell.net/keshav_1007/pwr7043d/7/

var yMax = 1.2;
            var svg1 = dimple.newSvg("body", 370, 230);
             var data = [{
            "Brand":"A", 
            "Day":"Mon", 
            "SalesVolume":10 },
            { 
            "Brand":"B", 
            "Day":"Mon", 
            "SalesVolume":20 }];
            var myChart = new dimple.chart(svg1, data);
            myChart.setBounds(120, 10, 170, 150)

            var x = myChart.addCategoryAxis("x", "Day");
            var y = myChart.addPctAxis("y", "SalesVolume");
            y.overrideMax = yMax;
            y.addOrderRule("SalesVolume");
            var s = myChart.addSeries("Brand",dimple.plot.bar);
            s.getTooltipText = function (e) {
                var graphValue = (e.aggField[0]);
                return [
                    ""+graphValue+""
                ];
            };
            s.barGap=0.7;
            myChart.draw();

            var defs = svg1.append("defs");
            defs.append("marker")
            .attr("id", "triangle-start")
            .attr("viewBox", "0 0 10 10")
            .attr("refX", 10)
            .attr("refY", 5)
            .attr("markerWidth", 10)
            .attr("markerHeight", 10)
            .attr("orient", "auto")
            .append("path")
            .attr("class", "marker")
            .attr("d", "M 0 0 L 10 5 L 0 10 z");

             svg1.append("line")
            .attr("x1", 140)
            .attr("x2", 195)
             .attr('stroke','black')

            .attr("y1", y._scale(0.5))
            .attr("y2", y._scale(0.5))
            .attr("marker-start", "url(#triangle-start)");  

请告诉我如何单独增加行的大小。

Answer 1

默认情况下，标记大小是相对于笔画宽度的，如果你不想这样，那么你可以使用 markerUnits属性使大小相对于当前用户空间坐标系。

所以，只需添加:

.attr("markerUnits", "userSpaceOnUse")

到创建标记元素的位置，并将大小调整为您想要的大小。之后更改笔画宽度不应影响标记的大小。