Question

我需要在同一个csv文件中切换两个数据集，我有一个关于英国超级联赛去年预测的v实际联赛位置的小数据集。

dataset1 =实际联赛位置
dataset2 =预测联赛位置

我的渲染数据功能似乎不起作用，因为我单击单选按钮时未显示我的第二个数据集（即预测） - 请参阅附图 - 仅显示实际位置数据集我提供了指向我的代码的链接：github link to my code

以下相关代码的副本

function render(data){

var  bars = g.selectAll("bar")
.data(data)

//enter
bars.enter().append("rect")
.attr("class", "bar")
      .attr("x1", 0)
    .attr("x2", 0)
    .attr("y", function(d) { return y(d.Team); })
    .attr("height", y.bandwidth())
    .attr("width", function(d) { return x2(d.Predicted_Finish); })
      .style("fill", "#a02f2b")

//exit
bars.exit()
.transition()
.duration(300)
.remove()

}


function init()
{

//setup the svg
 var svg = d3.select("svg"),
margin = {top: 20, right: 10, bottom: 65, left: 110}//position of axes 
frame
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;


//setup our ui
d3.select("#Actual")
    .on("click", function(d,i) {
        console.log(Actual);
        render(Actual)
    })   
d3.select("#Predicted")
    .on("click", function(d,i) {
        console.log(Predicted);
        render(Predicted)
    })   

render(Actual)
}

init();

Answer 1

此代码可以大大简化。

首先，一些格式问题：

放置不当<body>，没有</body>或</html>
<form>（它导致提交）

其次，您的代码可以重组。由于您的数据没有真正改变，因此您不需要完整的输入，更新，退出模式。您只想在单个数据集中的两个变量之间切换。考虑到这一点，以下是它最终的结果：

<head>
  <meta charset="utf-8">
  <title>CSS Example</title>
  <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">

  <style>
    .my-text {
      font-size: 1.95em;
      font-family: 'Passion One', cursive;
      fill: #000000;
    }

    .bar {
      fill: #71df3e;
    }

    .bar:hover {
      fill: white;
    }

    .axis--x path {
      display: none;
    }

    body {
      background-color: orange;
    }

    .axisx text {
      fill: black;
    }

    .axisy text {
      fill: black;
    }

    .axisx line {
      stroke: black;
    }

    .axisy line {
      stroke: black;
    }

    .axisx path {
      stroke: black;
    }

    .axisy path {
      stroke: black;
    }
  </style>

</head>

<body>

  <div id="buttons">
    <button id="Actual">Actual</button>
    <button id="Predicted">Predicted</button>
  </div>

  <svg width="1200" height="500">

    <text class="my-text" x="330" y="20">EPL PREDICTIONS VERSUS REALITY</text>

  </svg>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    //define svg canvas
    var svg = d3.select("svg"),
      margin = {
        top: 20,
        right: 10,
        bottom: 65,
        left: 110
      } //position of axes frame
    width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;

    //next our graph
    var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", function(d) {
        d.Actual_Finish = +d.Actual_Finish;
        d.Predicted_Finish = +d.Predicted_Finish;
        return d;
      }, function(error, data)
      {

        if (error) throw error;

        data = data;

        //define our x and y axis scales and variables, remembering we have 2 x                     variables 
        x1 = d3.scaleLinear().rangeRound([800, 1])
          //experiment with the max numbers to bring the x scale within the margin
          .domain([0, d3.max(data, function(d) {
            return d.Actual_Finish;
          })]);
        y = d3.scaleBand().rangeRound([0, height])
          .padding(0.5).domain(data.map(function(d) {
            return d.Team;
          }));

        //append x axis to svg
        g.append("g")
          .style("font", "14px arial") //font and size of x axis labels
          .attr("class", "axisx")
          .call(d3.axisBottom(x1).ticks(20))
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x1))
          .append("text")
          .attr("x", 450) //position of x1 axis label: x co-ordinate
          .attr("y", 35) //position of x axis label: y co-ordinate
          .attr("dx", "1.0em") //also position of X axis label
          .attr("text-anchor", "middle")
          .text("League Position");

        //append y axis to svg
        g.append("g") //append y axis to svg
          .style("font", "14px arial") //font and size of y axis labels
          .attr("class", "axisy")
          .call(d3.axisLeft(y).ticks(20)) //no. of ticks on y axis
          .append("text")
          .attr("transform", "rotate(-360)") //rotate the axis label text by -90
          .attr("y", -20) //position of y axis label
          .attr("dy", "1.0em") //sets the unit amount the y axis label moves above
          .attr("text-anchor", "end")
          .text("Team");

        var bars = g.selectAll('.bar')
          .data(data)
          .enter().append("rect")
          .attr("class", "bar")
          .attr("x1", 0)
          .attr("x2", 0)
          .attr("height", y.bandwidth())
          .style("fill", "#a02f2b");

        render('Actual_Finish')

        function render(which) {
          bars.attr("y", function(d) {
              return y(d.Team);
            })
            .attr("width", function(d) {
              return x1(d[which]);
            });
        }

        d3.select("#Actual")
          .on("click", function(d, i) {
            render('Actual_Finish')
          });
        d3.select("#Predicted")
          .on("click", function(d, i) {
            render('Predicted_Finish')
          });

      });
  </script>

</body>

</html>

可以看到正在运行的代码here。

在d3条形图中切换数据集

1 个答案: