如何僅增加SVG行的大小（寬度）

Question

我有一條線和一個標記。 現在我想只增加線條的寬度而不是箭頭。 如果我給筆畫寬度，那么線的大小和市場都會增加。

這是我的小提琴： 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")

到創建標記元素的位置，並將大小調整為您想要的大小。 之后，更改筆划寬度不應影響標記的大小。