iT邦幫忙

0

【D3js】如何改變座標軸的特定tick

  • 分享至 

  • xImage

大家好,
我想請問D3的座標軸,初始是這樣

但我想改成這樣時

要怎麼修改?
下面是我的code,

let xAxis = d3.axisBottom(xScale)
    .ticks(10)
    .tickFormat(d => d)
    .tickSizeOuter(10)
    .tickSizeInner(0)
    .tickPadding(10)
    //.tickSize(10) 這個沒辦法分別設定 inner 或 outer
    
let xAxisGroup = svg.append('g')
    .call(scale)
    .attr('transform', `translate(0,0)`)

目前遇到的問題是,
(1)使用.tickSizeOuter(10),也會設定到最後一個tick,無法只設定原點的tick。
(2)使用.tickSizeInner(-100),雖然能畫藍色線,但無法凸出座標軸

我試著去抓節點,並設定 attribute,也是沒辦法。

let xAxisGroup = svg.append('g')
    .call(scale)
    .attr('transform', `translate(0,0)`)

//這裡
const ttt = xAxisGroup.selectAll('.tick>line')
           
const tttArr = [...ttt]
tttArr.forEach((e,i)=>{
    if(i == 0){
        //試著單獨設定原點的tick
        e.setAttribute("style", 'stroke: Tomato; stroke-width: 3px');
    }
})

所以我想請問的是,如果想設定某一個特定的tick,要怎麼設定呢?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
金金
iT邦新手 1 級 ‧ 2023-01-13 18:21:54
最佳解答

嗨~不知道這樣的軸線是不是你想要的樣式呢?
https://ithelp.ithome.com.tw/upload/images/20230113/20134930XoAkCvPDVU.jpg

d3.js 提供的 Axis API 有自己的設定,基本上要直接使用它提供的tick相關API去客製化刻度跟軸線會有所侷限,因此有些較複雜的刻度設計會使用繪製兩條軸線的方式去處理。但你想要的刻度不太複雜,我建議用調整css的方法來處理~

以下程式碼提供參考,再跟我說適不適用唷

//html
 <div class="mt-5 wrapper"></div>
 
 //JS 
    const rwdSvgWidth = 500,
        rwdSvgHeight = 300,
        margin = 40;

      // chart SVG
      const svg = d3
        .select(".wrapper")
        .append("svg")
        .attr("width", rwdSvgWidth)
        .attr("height", rwdSvgHeight)
        .style("border", "1px solid rgb(96, 96, 96)");

      // 設定x、y軸比例尺
      const xScale = d3.scaleLinear().domain([0, 100]).range([0, 300]);
      const yScale = d3.scaleLinear().domain([0, 100]).range([220, 0]);

      // 建立x、y軸線
      let xAxis = d3
        .axisBottom(xScale)
        .tickSizeInner(-rwdSvgHeight + margin)
        .tickSizeOuter(0)
        .tickPadding(15);

      let yAxis = d3
        .axisLeft(yScale)
        .tickSizeInner(-(rwdSvgHeight + margin))
        .tickSizeOuter(0)
        .tickPadding(15);

      // x軸線綁訂到DOM
      svg
        .append("g")
        .attr("class", "xAxis")
        .call(xAxis)
        .attr(
          "transform",
          `translate(${margin * 3}, ${rwdSvgHeight - margin})`
        );

      // y軸線綁訂到DOM
      svg
        .append("g")
        .attr("class", "yAxis")
        .call(yAxis)
        .attr("transform", `translate(${margin * 3}, ${margin})`);

      // 調整tick特殊樣式
      d3.selectAll(".yAxis line").attr("transform", "translate(-10,0)");
      d3.selectAll(".xAxis line").attr("transform", "translate(0,10)");
greenriver iT邦研究生 4 級 ‧ 2023-01-16 11:50:40 檢舉

謝謝,終於成功了
/images/emoticon/emoticon32.gif
我也是看著妳之前寫的教學在練習的
太感恩妳
/images/emoticon/emoticon41.gif

金金 iT邦新手 1 級 ‧ 2023-01-17 10:55:08 檢舉

太好了,有幫上忙很開心~如果繪圖時折線或點點跑掉的話,可以再調整一下位置~

我要發表回答

立即登入回答