Обозначить Ось частью значения в D3? - PullRequest
Новая
       68

Обозначить Ось частью значения в D3?

0 голосов
/ 20 марта 2020

Я пытаюсь отобразить ось на линейном графике D3, но у меня есть две переменные, которые вносят вклад в линию, но не в ось. (График представлен по неделям и дням недели, но мне нужна только неделя по оси X. Этот фрагмент - то, что я сделал для визуализации оси, но он не работает. Я даже пытался установить домен вручную с помощью небольшой успех: 

var res = data.map((d,i) => {
      return {
        day : d.day,
        week: d.week,
        weekday: d.weekday,
        province : d.province,
        year : d.year,
        demand : +d.demand
      }
    })
    console.log(res)
    var xScale = d3.scaleLinear()
                  .domain([0,14])
                  .range([0, width]);

    function roundToNearest10K(x) {
      return Math.round(x / 10000) * 10000
    }
    console.log([0,d3.extent(res, d=>d.week)])
    var yScale = d3.scaleLinear()
      .domain([150000, roundToNearest10K(d3.max(res, d => d.demand))])
      .range([height, 0]);

    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append('g')
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    // CREATE AXES // 
    // render axis first before lines so that lines will overlay the horizontal ticks
    var xAxis = d3.axisBottom(xScale).ticks(d3.set(res, d=>d.week).values()).tickSizeOuter(axisPad*2).tickSizeInner(axisPad*2)
    var yAxis = d3.axisLeft(yScale).ticks(10, "s").tickSize(-width) //horizontal ticks across svg width

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", `translate(0, ${height})`)
      .call(xAxis)
      .call(g => {
        var weeks = xScale.ticks(d3.set(res, d=>d.week).values())
        console.log(weeks)
        var xshift = (width/(weeks.length))/2 
        g.selectAll("text").attr("transform", `translate(${xshift}, 0)`) //shift tick labels to middle of interval
          .style("text-anchor", "middle")
          .attr("y", axisPad)
          .attr('fill', '#A9A9A9')

        g.selectAll("line")
          .attr('stroke', '#A9A9A9')

        g.select(".domain")
          .attr('stroke', '#A9A9A9')

      })

Полная скрипка может быть найдена здесь: https://jsfiddle.net/mariam_ragab/78htoudq/# & Togetherjs = uQy9ercB3I

В ней много других ошибок, любая помощь приветствуется.

...