d3.js-范圍寬度與svgdefs的軸線不匹配

我想為帶箭頭的軸添加一些擴展名。下面的代碼基本上可以作業，但是范圍箭頭的寬度與軸的寬度不匹配！

axis_demo()
function axis_demo() {
  var width = 400
  var height = 100
  var margin = {left:20,top:40,right:80,bottom:20}
  
  var svg = d3.select('body')
  .append('svg')
  .attr('width',width   margin.left   margin.right)
  .attr('height',height   margin.top   margin.bottom)
  .style('border','2px solid red')
      
  var lc = 'grey'
  var lw = 4
  add_defs(svg,lw,lc)
  
  var g = svg.append('g')
  .attr('transform',`translate(${margin.left},${margin.top})`)
  
  add_scalePoint(g,width,height)
  console.log("done")
  function add_scalePoint(g,width,height) {
    var data = [
      {day : 'Mon', value: 10},
      {day : 'Tue', value: 40},
      {day : 'Wed', value: 30},
      {day : 'Thu', value: 60},
      {day : 'Fri', value: 30}
    ];
    var xname = 'day'
    var yname = 'value'
    
    var xdomain = data.map(d => d[xname])
    var xScale = d3.scalePoint()
      .domain(xdomain)
      .range([0, width]);
    
    let xaxis = g.append("g")       
    .attr("class", "xaxis")
    .call(d3.axisBottom(xScale) 
          .tickSizeOuter(0)
          .tickPadding(0))

    xaxis.select('path')
      .attr('stroke-width',lw)
      .attr('stroke',lc)
      .attr('marker-end', 'url(#arrhead)');
    
    xaxis.selectAll('.tick line')
      .attr('stroke',lc)
    
    xaxis.selectAll("text")
    .attr("transform", "rotate(-30)")
    .style("text-anchor", "end");

    g.selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cy',-30)
      .attr('cx', function(d) {
        return xScale(d[xname]);
      })
      .attr('r', 2);
  }
  
  function add_defs(g,lw,lc) {
      var xoff = 10
      var dx = 4
      var dy = 1.5
      var arrpath = ['M',2*lw,dy 2*lw,'l',xoff,0,
         0,dy,dx,-dy,-dx,-dy,0,dy]
      svg
      .append('defs')
      .append('marker')
      .attr('id', 'arrhead')
      .attr('refX', 2*lw)
      .attr('refY', dy 2*lw)
      .attr('markerWidth',xoff   dx   4*lw )
      .attr('markerHeight', 2*dy   4*lw)
      .attr('orient', 'auto-start-reverse')
      .append('path')
      .attr('d', arrpath.join(' '))
      .attr('stroke-miterlimit',5)
      .attr('stroke', lc)
      .attr('stroke-width', lw)
      .attr('fill', lc);
  }
  
  function add_circle(g,cx,cy,r) {
    g.append('circle')
    .attr('cx',cx)
    .attr('cy',cy)
    .attr('r',r);
  }
}

 <script src="https://d3js.org/d3.v6.min.js"></script>

uj5u.com熱心網友回復：

忽略

.attr('stroke-width', lw)

在構建標記時，

或替換lw為 1：

.attr('stroke-width', 1)

axis_demo()
function axis_demo() {
  var width = 400
  var height = 100
  var margin = {left:20,top:40,right:80,bottom:20}
  
  var svg = d3.select('body')
  .append('svg')
  .attr('width',width   margin.left   margin.right)
  .attr('height',height   margin.top   margin.bottom)
  .style('border','2px solid red')
      
  var lc = 'grey'
  var lw = 4
  add_defs(svg,lw,lc)
  
  var g = svg.append('g')
  .attr('transform',`translate(${margin.left},${margin.top})`)
  
  add_scalePoint(g,width,height)
  console.log("done")
  function add_scalePoint(g,width,height) {
    var data = [
      {day : 'Mon', value: 10},
      {day : 'Tue', value: 40},
      {day : 'Wed', value: 30},
      {day : 'Thu', value: 60},
      {day : 'Fri', value: 30}
    ];
    var xname = 'day'
    var yname = 'value'
    
    var xdomain = data.map(d => d[xname])
    var xScale = d3.scalePoint()
      .domain(xdomain)
      .range([0, width]);
    
    let xaxis = g.append("g")       
    .attr("class", "xaxis")
    .call(d3.axisBottom(xScale) 
          .tickSizeOuter(0)
          .tickPadding(0))

    xaxis.select('path')
      .attr('stroke-width',lw)
      .attr('stroke',lc)
      .attr('marker-end', 'url(#arrhead)');
    
    xaxis.selectAll('.tick line')
      .attr('stroke',lc)
    
    xaxis.selectAll("text")
    .attr("transform", "rotate(-30)")
    .style("text-anchor", "end");

    g.selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cy',-30)
      .attr('cx', function(d) {
        return xScale(d[xname]);
      })
      .attr('r', 2);
  }
  
  function add_defs(g,lw,lc) {
      var xoff = 10
      var dx = 4
      var dy = 1.5
      var arrpath = ['M',2*lw,dy 2*lw,'l',xoff,0,
         0,dy,dx,-dy,-dx,-dy,0,dy]
      svg
      .append('defs')
      .append('marker')
      .attr('id', 'arrhead')
      .attr('refX', 2*lw)
      .attr('refY', dy 2*lw)
      .attr('markerWidth',xoff   dx   4*lw )
      .attr('markerHeight', 2*dy   4*lw)
      .attr('orient', 'auto-start-reverse')
      .append('path')
      .attr('d', arrpath.join(' '))
      .attr('stroke-miterlimit',5)
      .attr('stroke', lc)
      .attr('stroke-width', 1)
      .attr('fill', lc);
  }
  
  function add_circle(g,cx,cy,r) {
    g.append('circle')
    .attr('cx',cx)
    .attr('cy',cy)
    .attr('r',r);
  }
}

 <script src="https://d3js.org/d3.v6.min.js"></script>

標籤：d3.js

上一篇：使用d3旋轉SVG影像元素

下一篇：在iOS真實設備上運行會話時，Appium檢查器會話非常慢（并且掛起）