D3.js - 設置拖動事件的最小和最大范圍

Question

我正在使用 D3.js 創建一個可拖動的折線圖，它工作正常，但目前我無法弄清楚如何設置最小和最大界限，如果我有一個數據集，即 [12, 19, 3, 5 , 2, 3] 拖動系列點將移動到數據集范圍之外的數字中。 我希望邊界是我的數據集的最小值-最大值，在這種情況下，您可以在 2-12 之間拖動數據系列。 這是一個 jsfiddle 的鏈接，它演示了我的問題https://jsfiddle.net/e8n4xd4z/1549/

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chartInstance = new Chart(ctx, options);

d3.select(chartInstance.chart.canvas).call(
  d3.drag().container(chartInstance.chart.canvas)
    .on('start', getElement)
    .on('drag', updateData)
    .on('end', callback)
);

var element, scale, datasetIndex, index, value


function getElement () {
    var e = d3.event.sourceEvent
    element = chartInstance.getElementAtEvent(e)[0]
  scale = element['_yScale'].id
}


function updateData () {
    var e = d3.event.sourceEvent
  datasetIndex = element['_datasetIndex']
  index = element['_index']
  value = chartInstance.scales[scale].getValueForPixel(e.clientY)
  chartInstance.data.datasets[datasetIndex].data[index] = value
  chartInstance.update(0)
}

function callback () {
 
}

謝謝

Answer 1

在這種情況下，您可以在 2-12 之間拖動數據系列

因為數據的最大值是 19，所以它應該是 2 - 19 嗎？

當拖動發生時， updateData工作並使用getValueForPixel獲取value ，然后更新數據和圖表。

chartInstance.data.datasets[datasetIndex].data[index] = value

所以要將拖動事件限制在[min, max]，你應該限制數據實際更新，使它們在[min, max]之間，然后你會覺得拖動事件有界限。

function updateData () {
  var e = d3.event.sourceEvent
  datasetIndex = element['_datasetIndex']
  index = element['_index']
  value = chartInstance.scales[scale].getValueForPixel(e.clientY)
  // limit the value that will be updated in the [min, max]
  value =  Math.min(19, Math.max(2, value))
  chartInstance.data.datasets[datasetIndex].data[index] = value
  chartInstance.update(0)
}

演示