Question

我正在用d3.js加载一些外部数据。我设法将这些数据渲染到我的情节中的正确位置。使用拖放我更新对象的位置。现在我想将这个位置转换回y轴上的相应值，但我不知道如何做到这一点。

Data.csv：

d3.csv("data.csv", function(error, data) {
    if (error) throw error;

    // format the data
    data.forEach(function(d) {
        d.date = parseTime(d.date);
        d.value = +d.value;
    });


    dataPoints = data;

});

数据加载：

self.x = d3.scaleTime()
    .domain([new Date(2017, 1, 1), new Date(2017, 1, 14)])
    .range([0, self.size.width]);


self.y = d3.scaleLinear()
    .domain([self.options.ymin, self.options.ymax])
    .range([self.size.height, 0]);

秤

svg.selectAll('circle')
    .data(dataPoints)
    .enter()
    .append('circle')
    .attr('r', 7)
    .attr('cx', function (d) {
        return self.x(d.date);
    })
    .attr("cy", function (d) {
        return self.y(d.value);
    })
    .call(d3.drag().on('drag', function(d) {
        d3.select(this).attr('cy', d.y = d3.event.y);
    }));

更新对象的位置：

var transform = d3.event.transform;

var xNewScale = transform.rescaleX(this.x);
this.gX.call(this.xAxis.scale(xNewScale));

var yNewScale = transform.rescaleY(this.y);
this.gY.call(this.yAxis.scale(yNewScale));

svg.selectAll('circle')
    .attr('cx', function (d) {
        return transform.applyX(self.x(d.date));
    })
    .attr('cy', function (d) {
        return transform.applyY(self.y(d.value));
    });

缩放功能

svg.selectAll('circle')
    .data(dataPoints)
    .enter()
    .append('circle')
    .attr('r', 7)
    .attr('cx', function (d) {
        return self.x(d.date);
    })
    .attr("cy", function (d) {
        return self.y(d.value);
    })
    .call(d3.drag().on('drag', function(d) {
        d3.select(this).attr('cy', d.y = d3.event.y);
    }));

解决！

我改变了这个：

更新对象的位置：

svg.selectAll('circle')
    .data(dataPoints)
    .enter()
    .append('circle')
    .attr('r', 7)
    .attr('cx', function (d) {
        return self.x(d.date);
    })
    .attr("cy", function (d) {
        return self.y(d.value);
    })
    .call(d3.drag().on('drag', function(d) {
        d.value = self.y.invert(d3.event.y);
        d3.select(this).attr('cy', self.y(d.value));
    }));

到此：

backend bk_foo
  [...]
  server srv_0a_00_01_05 10.0.1.5:80 weight 100
  server srv_0a_00_02_05 10.0.2.5:80 weight 100
  use-server %[req.hdr(x-backend-ip),lower,map_str(/etc/haproxy/hdr2srv.map,srv_any)] if { req.hdr(x-backend-ip),lower,map_str(/etc/haproxy/hdr2srv.map) -m found }

Answer 1

要获得y轴上新位置的相应值，您必须使用invert：

给定范围中的值，返回域中的相应值。反转对于交互是有用的，比如确定对应于鼠标位置的数据值

所以，例如：

＆＃13;

 observeEvent(input$do,{
   input$rhm_clic<-NULL
 })

＆＃13;

var y = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 500]);
  
console.log(y.invert(350));
console.log(y.invert(40));
console.log(y.invert(500));

＆＃13;

将像素偏移量转换回值，反之亦然

1 个答案: