时间戳

首页 > 解决方案 > D3.js - 为拖动事件设置最小和最大范围

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

问题描述

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

谢谢

标签： javascriptjqueryd3.js

解决方案

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

它应该是 2 - 19，因为数据的最大值是 19？

当拖动发生时，updateData工作并获得valueusing getValueForPixel，然后更新数据和图表。

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)
}

演示

推荐阅读