Как перетащить путь в d3.js - PullRequest
Новая
       18

Как перетащить путь в d3.js

0 голосов
/ 06 мая 2018

Я не могу понять, как перетащить путь вокруг объекта SVG, используя d3.js

В частности, у меня есть нормальная форма распределения, отображаемая как путь к SVG, и я хочу иметь возможность щелкнуть пои перетащите его вокруг пространства SVG (но нет ничего уникального в этой конкретной форме и т. д.).

Я видел примеры точек, прямых линий и фигур, но не пути.

Myупрощенный код ниже.Если я не далеко от цели, я подозреваю, что ошибка с перетаскиваемой функцией прямо внизу.

Javascript: 

// width and height for svg object

var w = 500;
var h = 500;

/// setting up svg object 

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)


// Values for calculating pdf of normal distribution 
var sigma = 4;
var mu = 0;
var N = 10;
var step = 0.1;
var dataset = [];
var x;

// creating the pdf of the normal distribution and plotting it for -N to N
var C = 1/(sigma*Math.sqrt(2*Math.PI));
for (x=-N; x < N; x += step) {
    var E = (x-mu)/sigma;
    E = -(E*E)/2;
    var d = C*Math.exp(E);
    dataset.push(d);
}


// Scales slightly over fancy, required for features stripped out
var overlap = w*0.1;
var xscale1 = d3.scale.linear().range([0, w/2+overlap]).domain([0, dataset.length-1]).clamp(true);
var xscale2 = d3.scale.linear().range([w/2-overlap, w]).domain([0, dataset.length-1]).clamp(true);



// So specifies the height as max in dataset and it takes up 1/2 the svg
var yscale = d3.scale.linear().domain([0, d3.max(dataset)]).range([h,h/2]);
var area1 = d3.svg.area()
    .x(function(d,i) { return xscale1(i); })
    .y0(h)
    .y1(function(d,i) { return yscale(d); });

 // plots filled normal distribution to svg  
g1 = svg.append("path")
      .datum(dataset)
      .attr("class", "area1")
      .attr("d", area1)
      .attr("opacity",0.75);

// Problem is probably with the below line and related function dragged
d3.select("path.area1").on("drag", dragged);


function dragged() {
        var dx = d3.event.dx,
           dy = d3.event.dy;
  d3.select(this)
     .attr("transform", path => "translate(" + dx + "," + dy + ")");
}

1 Ответ

0 голосов
/ 06 мая 2018

Вот версия вашего кода, которая реализует перетаскивание: 

var w = 500;
var h = 250;

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

// Values for calculating pdf of normal distribution 
var sigma = 4;
var mu = 0;
var N = 10;
var step = 0.1;
var dataset = [];
var x;

// creating the pdf of the normal distribution and plotting it for -N to N
var C = 1/(sigma*Math.sqrt(2*Math.PI));
for (x=-N; x < N; x += step) {
    var E = (x-mu)/sigma;
    E = -(E*E)/2;
    var d = C*Math.exp(E);
    dataset.push(d);
}


// Scales slightly over fancy, required for features stripped out
var overlap = w*0.1;
var xscale1 = d3.scale.linear().range([0, w/2+overlap]).domain([0, dataset.length-1]).clamp(true);
var xscale2 = d3.scale.linear().range([w/2-overlap, w]).domain([0, dataset.length-1]).clamp(true);



// So specifies the height as max in dataset and it takes up 1/2 the svg
var yscale = d3.scale.linear().domain([0, d3.max(dataset)]).range([h,h/2]);
var area1 = d3.svg.area()
    .x(function(d,i) { return xscale1(i); })
    .y0(h)
    .y1(function(d,i) { return yscale(d); });

svg.append("path")
  .datum(dataset)
  .attr("class", "area1")
  .attr("d", area1)
  .attr("opacity",0.75)
  .call(d3.behavior.drag().on("drag", dragged));

function dragged(d) {

  // Current position:
  this.x = this.x || 0;
  this.y = this.y || 0;
  // Update thee position with the delta x and y applied by the drag:
  this.x += d3.event.dx;
  this.y += d3.event.dy;

  // Apply the translation to the shape:
  d3.select(this)
    .attr("transform", "translate(" + this.x + "," + this.y + ")");
}
<body></body>
<script src="https://d3js.org/d3.v3.min.js"></script>

Это на самом деле точно такой же способ, как и любые другие перетаскивания на другие типы фигур. Вы просто применяете поведение перетаскивания на выбранном узле.

Вот часть, отвечающая за реализацию перетаскивания: 

svg.append("path")
  .datum(dataset)
  .attr("d", area1)
  ...
  .call(d3.behavior.drag().on("drag", dragged));

function dragged(d) {

  // Current position:
  this.x = this.x || 0;
  this.y = this.y || 0;
  // Update thee position with the delta x and y applied by the drag:
  this.x += d3.event.dx;
  this.y += d3.event.dy;

  // Apply the translation to the shape:
  d3.select(this)
    .attr("transform", "translate(" + this.x + "," + this.y + ")");
}

Главное, что вы пропустили, это то, что dx и dy, которые вы получаете от события, - это движения мыши («дельта» движения). Эти движения не могут стать новой позицией фигуры. Они должны быть добавлены к существующей x и y текущей позиции фигуры.

А вот тот же код, но для версии 4 d3: 

var w = 500;
var h = 250;

var svg = d3.select("body").append("svg").attr("width", w).attr("height", h)

// Values for calculating pdf of normal distribution 
var sigma = 4;
var mu = 0;
var N = 10;
var step = 0.1;
var dataset = [];
var x;

// creating the pdf of the normal distribution and plotting it for -N to N
var C = 1/(sigma*Math.sqrt(2*Math.PI));
for (x=-N; x < N; x += step) {
    var E = (x-mu)/sigma;
    E = -(E*E)/2;
    var d = C*Math.exp(E);
    dataset.push(d);
}

// Scales slightly over fancy, required for features stripped out
var overlap = w*0.1;
var xscale1 = d3.scaleLinear().range([0, w/2+overlap]).domain([0, dataset.length-1]).clamp(true);
var xscale2 = d3.scaleLinear().range([w/2-overlap, w]).domain([0, dataset.length-1]).clamp(true);

// So specifies the height as max in dataset and it takes up 1/2 the svg
var yscale = d3.scaleLinear().domain([0, d3.max(dataset)]).range([h,h/2]);
var area1 = d3.area()
    .x(function(d,i) { return xscale1(i); })
    .y0(h)
    .y1(function(d,i) { return yscale(d); });

 // plots filled normal distribution to svg  
g1 = svg.append("path")
      .datum(dataset)
      .attr("class", "area1")
      .attr("d", area1)
      .attr("opacity",0.75)
      .call(d3.drag().on("drag", dragged));

function dragged(d) {

  // Current position:
  this.x = this.x || 0;
  this.y = this.y || 0;
  // Update thee position with the delta x and y applied by the drag:
  this.x += d3.event.dx;
  this.y += d3.event.dy;

  // Apply the translation to the shape:
  d3.select(this)
  	.attr("transform", "translate(" + this.x + "," + this.y + ")");
}
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
...