d3 v4: масштабирование с текстовыми метками по оси x с помощью кисти - PullRequest
Новая
       19

d3 v4: масштабирование с текстовыми метками по оси x с помощью кисти

0 голосов
/ 24 сентября 2019

Я пытаюсь увеличить ось X с помощью функции кисти;масштаб - это текстовый масштаб, и я использовал функцию scalePoint () (см. код ниже).У меня проблемы с масштабированием этой оси.Его ошибка броска в домене функции масштабирования для оси. Можете ли вы предложить альтернативу? 

  // Add X axis
    var x = d3.scalePoint()
        .domain(data.map(function(d){return d.Label;})) //data column: label
        .range([height, 30]);

    var xAxis = svgContainer.append("g")
        .style("stroke", "#f2b14e")
        .attr("transform", "translate(80," + 0 + ")")
        .call(d3.axisLeft(y));

  //brush function
      var brush = d3.brush().extent([[80, 0], [width+100, height]]).on("end", brushended),
        idleTimeout,
        idleDelay = 350;

     // Add the brushing
        var brush_pan = scatter.append("g")
                    .attr("class", "brush")
                    .call(brush);

    function brushended() {

        var s = d3.event.selection;

        if (!s) {
            if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
            x.domain([0, d3.max(data, function(d){return Math.max(d.ActualDate)})]);    
            y.domain(data.map(function(d){return d.Label;}));
            } else {
            x.domain([s[0][0]* ratio, s[1][0]].map(x.invert, x));
            y.domain([s[1][1]* ratio, s[0][1]]).map(y.invert, y));
            scatter.select(".brush").call(brush.move, null);
            }
            zoom();
        }

    function idled() {
            idleTimeout = null;
        }

    function zoom() {

                var t = scatter.transition().duration(1150);
                xAxis.transition(t).duration(1150).call(d3.axisBottom(x));
                yAxis.transition(t).duration(1150).call(d3.axisLeft(y));
                scatter.selectAll("circle").transition(t) //the display element
                    .attr("cx", function(d) {return x(tParser(d.ForecastDate)) } ) //x-Axis is date
                    .attr("cy", function(d) {return y(d.Label) } )
                    .attr("r", 5);
    }
...