我正在尝试创建一个滑块,该滑块在从左向右滑动条时显示数据。 当我从右向左滑动时,我的数据不会显示。 其次,x轴缩放到的最大数字为9。我一直在处理我的数据,如果我将8用作x轴的最高值,则8将是最高值。 但是由于某些原因,我不能超过9。 即使我的所有数字都在9以下,也不会显示所有数据。

在我的数据中,我有两列。 一个称为“ ep”(用于x轴),另一个称为“ char”(用于y轴)。

关于如何使X轴正确缩放并显示数据的任何想法?

  <!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>LD V6</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      font-family:"avenir next", Arial, sans-serif;
      font-size: 12px;
      color: #696969;
    }

    .ticks {
      font-size: 10px;
    }

    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }

    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }

    .track-inset {
      stroke: #dcdcdc;
      stroke-width: 8px;
    }

    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }

    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }



  </style>
</head>

<body>
<div id="vis">

</div>
<script>




var margin = {top:50, right:30, bottom:30, left:30},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var svg = d3.select("#vis")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);  

////////// slider //////////

var moving = false;
var currentValue = 0;
var targetValue = 200;

var playButton = d3.select("#play-button");

var x = d3.scaleLinear().range([0, width])
    .clamp(true);

var y = d3.scaleLinear().range([height, 0]);

var slider = svg.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + 50 + "," + (height) + ")");

slider.append("line")
    .attr("class", "track")
    .attr("x1", x.range()[0])
    .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { slider.interrupt(); })
        .on("start drag", function() {
          currentValue = d3.event.x;
          update(x.invert(currentValue)); 
        })
    );

//Attributes of the slider
slider.insert("g", ".track-overlay")
    .attr("class", "ticks")
    .attr("transform", "translate(0," + 18 + ")")
 /* .selectAll("text")
    .data(x.ticks(8))
    .enter()
    .append("text")
    .attr("x", x)
    .attr("y", 10)
    .attr("text-anchor", "middle")
    .text(function(d) { return d.ep); }); */

//Attributes of the slider handle   
var handle = slider.insert("circle", ".track-overlay")
    .attr("class", "handle")
    .attr("r", 8);

    /*
var label = slider.append("text")  
    .attr("class", "label")
    .attr("text-anchor", "middle")
    .text(formatDate(startDate))
    .attr("transform", "translate(0," + (-25) + ")")
    */

////////// plot //////////

var dataset;

var plot = svg.append("g")
    .attr("class", "plot")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("trial_v3.csv", prepare, function(data) {
  dataset = data;
  drawPlot(dataset);

  // scale the range of the data
  y.domain([0, d3.max(data, function(d) { return d.char; })]);
  x.domain([0, d3.max(data, function(d) { return d.ep; })]);

  // add the Y Axis
  svg.append("g")
    .call(d3.axisLeft(y))
    .attr("transform", "translate(" + 50 + ",0)");

  // add the X Axis
  svg.append("g")
    .call(d3.axisBottom(x))
    .attr("transform", "translate(" + 50 +"," + height + ")")

})


function prepare(d) {
  d.ep = d.ep;
  d.char = d.char;

  return d;

}



function drawPlot(data) {
  var locations = plot.selectAll(".location")
    .data(data);

  // if filtered dataset has more circles than already existing, transition new ones in
  locations.enter()
    .append("circle")
    .attr("class", "location")
    .attr("cx", function(d) { return x(d.ep); })
    .attr("cy", function(d){  return y(d.char)}) 
    .style("opacity", 0.5)
    .attr("r", 5)
      .transition()
      .duration(1200)
      .attr("r", 11
            );


  // if filtered dataset has less circles than already existing, remove excess
  locations.exit()
    .remove();

    }

function update(h) {
  // update position and text of label according to slider scale circle
  handle.attr("cx", x(h));
  /*label
    .attr("x", x(h))
    .text(formatDate(h)); */

  // filter data set and redraw plot
  var newData = dataset.filter(function(d) {
    return d.ep < h;
  })
  drawPlot(newData); 
};

/////////////////////////////////////////////////// SVG 2 /////////////////////////////////////////////
/*
var svg2 = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom); 

    svg2.append("rect")
        .attr("width", 50)
        .attr("height",50)

*/  

</script>
</body>

  ask by J Zhang translate from so

本文未有回复,本站智能推荐:

4回复

d3.js:限制画笔的大小

有没有办法限制画笔的大小,即使范围更大? 我把一个只有x刻度的画笔放在一起,可以移动和调整大小。 我希望能够限制用户可以调整大小的程度(基本上只能达到某一点)。 在以下示例中,当画笔大于最大范围的一半时,画笔功能会停止更新。 但是,刷子本身仍然可以延长。 有没有办法防止这种情况
2回复

d3.js缩放/域值的意外行为

不好意思,但是我要花大约5个小时来敲打它,无法弄清楚到底发生了什么。 我正在http://bl.ocks.org/mbostock网站上处理一些示例,并尝试在堆积的条形图中添加图例。 为此,我正在设置比例和范围: 加载数据后,我正在设置域: 如果我此时控制台日志...
2回复

如何在d3.js中显示选定的刻度标签

我正在使用d3库创建甘特图。 到目前为止,我已经完成了与此图像相似的操作: 但是,您会注意到,在小时轴上,最左边和最右边的12AM标签已经用完了。 因此,我想知道是否有一种方法可以从2AM开始到10PM结束? 我这样定义小时轴: 我想保留此配置,但正如我所说,我想从2A
1回复

D3.js森伯斯特弧度不正确

我有一个可缩放的森伯斯特图,它显示了弧大小方面的奇怪问题。 http://colinwhite.net/Sunburst/ 我希望弧的大小与子代数成正比(如工具提示中所示)。 但是,我的父母弧中的孩子很少,这比孩子多得多的同龄人大。 弧的大小不能反映孩子的数量。 我尝试了其他各
1回复

D3.js图表​​画笔和Crossfilter.js缩放不同步

我试图使用画笔范围突出显示D3条形图中的选择。 JSFiddle http://jsfiddle.net/Nyquist212/yys2mqkx/ 我正在使用crossfilter来reduceCount()我的数据,所以我可以绘制得分分布。 但这似乎与我的x尺度紧密相关。 拖动
1回复

D3缩放无法正确重置缩放状态和转换的位置

好吧,我已经使其工作了,但是现在以某种方式进行测试后,它不再工作了。 因此,在我的项目中,我有一个可缩放和可拖动的地图 。 放大或拖动时,您始终可以单击“ 重置”按钮以重置整个演示文稿。 效果很好。 因此缩放定义 : 缩放功能是: 单击“重置”按钮可以正确完成重置。
1回复

D3.js上的对数刻度

我正在尝试使用刻度来绘制音频波形。 线性刻度太“动态”,我想在峰值上应用压缩。 我想到了一个对数刻度,虽然我真的不知道如何在D3中使用它。 线性比例: // Scale for time xScale = d3.scaleLinear() .domain([0,sam
1回复

我的d3.js秤不起作用

我是d3.js的新手,目前正在版本4中制作一个简单的条形图。我了解秤的基本概念。 问题是,每当我重新加载页面时,条形图上的某些条形就会被切成两半,或者一直移动到顶部(或底部),这就是我的代码。 我希望我的酒吧停留在svg范围内,但如果我举个例子 它不会工作。 有任何想法吗? 我的