javascript - d3 v4 轴未更新

标签 javascript d3.js

我目前正在制作一个简单的折线图，它根据一系列输入表单更新其值。

我可以正确创建和渲染图表，并且可以根据用户输入更新线条，但是我的轴标签不会依次更新。我在这里尝试了一些其他示例，但没有成功，有人可以帮助我修复 updateData() 函数以更新代码中的轴标签吗？

jsfiddle - https://jsfiddle.net/quirkules/0xktoLj7/1/ 

  //****** CREATE CHART ******

  //collect data from input fields
  var data = [];
  for (var i = 0; i < 10; i++) {
    data.push({
      x: d3.select('#cadenceThroughputData' + i).select('input').property('value'),
      y: d3.select('#cadenceLengthData' + i).select('input').property('value'),
    });
  }

  // set the dimensions and margins of the graph
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = d3.select('#output-chart').node().getBoundingClientRect().width - margin.left - margin.right,
      height = d3.select('#output-chart').node().getBoundingClientRect().height - margin.top - margin.bottom;

  // set the ranges
  var x = d3.scaleLinear().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  var x_axis = d3.axisBottom().scale(x);
  var y_axis = d3.axisLeft().scale(y);

  // define the line
  var valueline = d3.line()
    .x(d => { return x(d.x); })
    .y(d => { return y(d.y); });

  // append the svg obgect to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("#output-chart")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // format the data
  data.forEach(function(d) {
      d.x = +d.x;
      d.y = +d.y;
  });

  // Scale the range of the data
  x.domain([0, d3.max(data, d => { return d.x; })]);
  y.domain([0, d3.max(data, d => { return d.y; })]);

  // Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(x_axis);

  // Add the Y Axis
  svg.append("g")
      .call(y_axis);

  function updataData(){
    //collect data from input fields again
    var data = [];
    for (var i = 0; i < 10; i++) {
      data.push({
        x: d3.select('#cadenceThroughputData' + i).select('input').property('value'),
        y: d3.select('#cadenceLengthData' + i).select('input').property('value'),
      });
    }

    // format the data
    data.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
    });

    // Scale the range of the data again
    x.domain([0, d3.max(data, d => { return d.x; })]);
    y.domain([0, d3.max(data, d => { return d.y; })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("#output-chart").transition();

    // Make the changes
    // change the line
    svg.select(".line")
      .duration(750)
      .attr("d", valueline(data));
    // change the x axis
    svg.select(".x") 
      .duration(750)
      .call(x_axis);
    // change the y axis
    svg.select(".y") 
      .duration(750)
      .call(y_axis);
  }

  //****** END CREATE CHART ******

最佳答案

小改动:

主要问题的解决方案，即轴未更新=>您正在调用select('.x')，但您在创建x和<时错过了添加类y 轴。 

    svg.append("g").attr('class', 'x')....


    svg.append("g").attr('class', 'y')...

对代码的一些补充(也许您可以将它们称为我的建议):

  1. 通常折线图只是一条简单的线，不显示填充区域。为此，请进行以下更改(对 path 附加)，或者您可以添加 CSS:

    .style('fill', 'none')
.style('stroke', '#000')

  2. .header 不需要任何填充。调整大小后看起来很乱。删除 .header {/* padding: 20px 0px 20px 0px; */}

  3. 也许您错过了这一点，但 y 列输入在更改时不会调用 updateData()。

    d3.select('#input-cadenceLengthData')
...
.append('input')
.on('input', updataData)

将以上所有内容放在一起，这是一个 fiddle :https://jsfiddle.net/nq1rfy7c/

片段:

  //****** SETUP DIVS ******

  // Add the divs to the DOM
  $(document.body)
    .append('<div id="global-header"></div>')
    .append('<div id="input-cadenceSelect"></div>')
    .append('<div id="input-cadenceThroughputHeader"></div>')
    .append('<div id="input-cadenceLengthHeader"></div>')
    .append('<div id="input-cadenceType"></div>')
    .append('<div id="input-cadenceThroughputData"></div>')
    .append('<div id="input-cadenceLengthData"></div>')
    .append('<div id="output-chart"></div>')
    .append('<div id="output-summary"></div>')
    .append('<div id="global-footer"></div>');

  //add text to #input-cadenceThroughputHeader
  d3.select('#input-cadenceThroughputHeader')
    .append('label')
    .text('X Value');
  d3.select('#input-cadenceLengthHeader')
    .append('label')
    .text('Y Value');
    
  for (var i = 0; i < 10; i++) {
    //add 10 #cadenceType divs to #input-cadenceType
    d3.select('#input-cadenceType')
      .append('div')
      .attr('class', 'header')
      .attr('id', 'cadenceType' + i)
      .style('position', 'absolute')
      .style('top', (i * 10) + '%')
      .style('width', '100%')
      .style('height', '10%')
      .style('display', 'table')
      .style('background', bandColour(i))
      .append('label')
      .text((i + 1));

    //add 10 #cadenceData divs to #input-cadenceData
    d3.select('#input-cadenceThroughputData')
      .append('div')
      .attr('id', 'cadenceThroughputData' + i)
      .style('position', 'absolute')
      .style('top', (i * 10) + '%')
      .style('width', '100%')
      .style('height', '10%')
      .style('background', bandColour(i))
      .append('input')
      .on('input', updataData)
      .attr('size', '6')
      .attr('maxlength', '4')
      .style('height', '20px')
      .style('background', bandColour(i))
      .attr('value', parseInt(Math.random() * 100));

    //add 10 #cadenceLength divs to #input-cadenceLength
    d3.select('#input-cadenceLengthData')
      .append('div')
      .attr('id', 'cadenceLengthData' + i)
      .style('position', 'absolute')
      .style('top', (i * 10) + '%')
      .style('width', '100%')
      .style('height', '10%')
      .style('background', bandColour(i))
      .append('input')
      .attr('size', '6')
      .attr('maxlength', '4')
      .style('height', '20px')
      .style('background', bandColour(i))
      .on('input', updataData)
      .attr('value', parseInt(Math.random() * 10));
  }

  function bandColour(i) {
    if (i % 2 > 0) {
      return '#333';
    } else {
      return '#171213';
    }
  }

  //****** END SETUP DIVS ******

  //****** CREATE CHART ******

  //collect data from input fields
  var data = [];
  for (var i = 0; i < 10; i++) {
    data.push({
      x: d3.select('#cadenceThroughputData' + i).select('input').property('value'),
      y: d3.select('#cadenceLengthData' + i).select('input').property('value'),
    });
  }

  // set the dimensions and margins of the graph
  var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 50
    },
    width = d3.select('#output-chart').node().getBoundingClientRect().width - margin.left - margin.right,
    height = d3.select('#output-chart').node().getBoundingClientRect().height - margin.top - margin.bottom;

  // set the ranges
  var x = d3.scaleLinear().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);

  var x_axis = d3.axisBottom().scale(x);
  var y_axis = d3.axisLeft().scale(y);

  // define the line
  var valueline = d3.line()
    .x(d => {
      return x(d.x);
    })
    .y(d => {
      return y(d.y);
    });

  // append the svg obgect to the body of the page
  // appends a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  var svg = d3.select("#output-chart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // format the data
  data.forEach(function(d) {
    d.x = +d.x;
    d.y = +d.y;
  });

  // Scale the range of the data
  x.domain([0, d3.max(data, d => {
    return d.x;
  })]);
  y.domain([0, d3.max(data, d => {
    return d.y;
  })]);

  // Add the valueline path.
  svg.append("path")
    .data([data])
    .attr("class", "line")
    .style('fill', 'none')
    .style('stroke', '#000')
    .attr("d", valueline);

  // Add the X Axis
  svg.append("g").attr('class', 'x')
    .attr("transform", "translate(0," + height + ")")
    .call(x_axis);

  // Add the Y Axis
  svg.append("g").attr('class', 'y')
    .call(y_axis);

  function updataData() {
    //collect data from input fields again
    var data = [];
    for (var i = 0; i < 10; i++) {
      data.push({
        x: d3.select('#cadenceThroughputData' + i).select('input').property('value'),
        y: d3.select('#cadenceLengthData' + i).select('input').property('value'),
      });
    }

    // format the data
    data.forEach(function(d) {
      d.x = +d.x;
      d.y = +d.y;
    });

    x_axis = d3.axisBottom().scale(x);
    y_axis = d3.axisLeft().scale(y);

    // Scale the range of the data again
    x.domain([0, d3.max(data, d => {
      return d.x;
    })]);
    y.domain([0, d3.max(data, d => {
      return d.y;
    })]);

    // Select the section we want to apply our changes to
    var svg = d3.select("#output-chart").transition();

    // Make the changes
    // change the line
    svg.select(".line")
      .duration(750)
      .attr("d", valueline(data));
    // change the x axis
    svg.select(".x")
      .duration(750)
      .call(x_axis);
    // change the y axis
    svg.select(".y")
      .duration(750)
      .call(y_axis);
  }

  //****** END CREATE CHART ******
body {
  font-family: sans-serif;
  color: white;
  background: #171213;
}

label {
  display: block;
}

input,
textarea {
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border: 2px solid transparent;
}

#global-header {
  position: fixed;
  left: 0px;
  top: 0px;
  height: 5%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.5em;
  font-family: Helvetica;
  color: white;
}

.header {
  color: #009DE0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
 /* padding: 20px 0px 20px 0px; */
}

#input-cadenceType {
  position: fixed;
  box-sizing: border-box;
  border-left: 2px solid #009DE0;
  border-top: 2px solid #009DE0;
  border-bottom: 2px solid #009DE0;
  margin-left: 0%;
  top: 25%;
  width: 10%;
  height: 73%;
}

#input-cadenceThroughputHeader {
  position: fixed;
  color: #009DE0;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  border-left: 2px solid #009DE0;
  border-top: 2px solid #009DE0;
  margin-left: 10%;
  top: 20%;
  width: 10%;
  height: 5%;
  text-align: center;
}

#input-cadenceLengthHeader {
  position: fixed;
  color: #009DE0;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  border-left: 2px solid #009DE0;
  border-top: 2px solid #009DE0;
  margin-left: 20%;
  top: 20%;
  width: 10%;
  height: 5%;
  text-align: center;
}

#input-cadenceThroughputData {
  position: fixed;
  box-sizing: border-box;
  border-top: 2px solid #009DE0;
  border-left: 2px solid #009DE0;
  border-bottom: 2px solid #009DE0;
  margin-left: 10%;
  top: 25%;
  width: 10%;
  height: 73%;
}

#input-cadenceLengthData {
  position: fixed;
  box-sizing: border-box;
  border-top: 2px solid #009DE0;
  border-left: 2px solid #009DE0;
  border-bottom: 2px solid #009DE0;
  margin-left: 20%;
  top: 25%;
  width: 10%;
  height: 73%;
}

#input-simConstraint {
  position: fixed;
  margin-left: 30%;
  top: 5%;
  width: 35%;
  height: 20%;
  background: aqua;
  text-align: right;
}

#input-simDataHeader {
  position: fixed;
  margin-left: 65%;
  top: 5%;
  width: 35%;
  height: 5%;
  background: orange;
  text-align: center;
}

#input-simDataNoStoriesHeader {
  position: fixed;
  margin-left: 65%;
  top: 10%;
  width: 11.67%;
  height: 5%;
  background: green;
  text-align: center;
}

#input-simDataFocusHeader {
  position: fixed;
  margin-left: 76.67%;
  top: 10%;
  width: 11.67%;
  height: 5%;
  background: silver;
  text-align: center;
}

#input-simDataLengthHeader {
  position: fixed;
  margin-left: 88.34%;
  top: 10%;
  width: 11.67%;
  height: 5%;
  background: goldenrod;
  text-align: center;
}

#input-simDataNoStoriesValue {
  position: fixed;
  margin-left: 65%;
  top: 15%;
  width: 11.67%;
  height: 5%;
  background: pink;
  text-align: center;
}

#input-simDataFocusValue {
  position: fixed;
  margin-left: 76.67%;
  top: 15%;
  width: 11.67%;
  height: 5%;
  background: navy;
  text-align: center;
}

#output-chart {
  position: fixed;
  margin-left: 30%;
  top: 20%;
  width: 70%;
  height: 58%;
  background: red;
  text-align: right;
}

#global-footer {
  position: fixed;
  background: #171213;
  left: 0px;
  bottom: 0px;
  height: 2%;
  width: 100%;
  vertical-align: middle;
  text-align: right;
  font-size: 0.75em;
  font-family: Helvetica;
  color: white;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

希望这有帮助。

关于javascript - d3 v4 轴未更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52461592/

上一篇：javascript - Angularjs Material - 同步多个选择框

下一篇：javascript - 从状态获取数据 React-Native Javascript

相关文章：

javascript - 如何使用 Nv.d3.js 库将饼图置于顶部？

javascript - setTimeout 内的函数给出未定义

javascript - 解析.com : current user not available in other page after login

javascript - 我如何有效地判断我存储的值是否在 TypedArray 的范围内？

javascript - Jquery .load div 内容并查找 div id 删除类

javascript - TextArea 中的 For-Each 循环

javascript - 如何计算 json 中树元素的大小属性？

javascript - 直接在 d3 对象和 d3-context-menu 上 typescript /原型(prototype)

javascript - d3 v4 : How to make a path being curved when only start and end point are known?

javascript - 哪个 javascript 图形/图表库？

©2024 IT工具网  联系我们