如何僅增加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") 

以創建標記元素在哪裏，並調整大小，你希望它是什麼。之後，改變筆畫寬度不應該影響標記的大小。