D3.js - 为拖动事件设置最小和最大范围答案

【问题标题】：D3.js - Setting a minimum and maximum range for a drag eventD3.js - 为拖动事件设置最小和最大范围
【发布时间】：2020-09-21 17:08:45
【问题描述】：

我正在使用 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 () {
 
}

谢谢

【问题讨论】：

标签： javascript jquery d3.js

【解决方案1】：

在这种情况下，您可以在 2-12 之间拖动数据系列

应该是 2 - 19，因为数据的最大值是 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)
}

demo

【讨论】：