d3.js中带有下拉菜单的分组条形图

问题描述 投票：0回答：1
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="L4F - Axes and scales ">
  <title>SVG</title>
  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  <body>
    <form>
      <select>
        <option value="first" selected>First</option>
        <option value="second">Second</option>
      </select>
    </form>
    <svg width="960" height="500"></svg>
  </body>
  <script>

  var vals = '[{"Department":"CAM","UG":71,"PG":81,"Foundation":55},{"Department":"CSIS","UG":66,"PG":80,"Foundation":43},{"Department":"GAV","UG":60,"PG":77,"Foundation":50}]'
  var vals1 = '[{"Department":"CAM","UG":51,"PG":91,"Foundation":65},{"Department":"CSIS","UG":76,"PG":60,"Foundation":32},{"Department":"GAV","UG":86,"PG":87,"Foundation":70}]'
  data = JSON.parse(vals);
  data1 = JSON.parse(vals1);

  d3.selectAll("select").on("change", selectDataset);
  function selectDataset()
  {
       value = this.value;
      if (value == "first")
      {
          // change(datasetTotal);
          change(vals);
      }
      else if (value == "second")
      {
          // change(datasetOption1);
          change(vals1);
      }
    }
    var svg = d3.select("svg"),
            margin = { top: 20, right: 20, bottom: 30, left: 40 },
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var x0 = d3.scaleBand()
            .rangeRound([0, width])
            .paddingInner(0.1);

        var x1 = d3.scaleBand()
            .padding(0.05);

        var y = d3.scaleLinear()
            .rangeRound([height, 0]);
// "#98abc5", "#8a89a6", "#7b6888", "#6b486b",
        var z = d3.scaleOrdinal()
            .range([ "rgba(255, 99, 132, 0.5)", "rgba(153, 102, 255, 0.5)", "rgba(54, 162, 235, 0.5)"])

//added extra for testing
            var xAxis=d3.axisBottom(x0);

                 // add the y Axis
         var yAxis=d3.axisLeft(y);
//till here
        console.log(data)
        var keys = Object.keys(data[0]).slice(1);


//added extra
        svg.append("g")
           .attr("class", "x axis")
           .attr("transform", "translate(0," + height + ")")
           .call(xAxis);

       d3.select("input[value=\"first\"]").property("checked", true);
       change(vals);
       //till here

       var legend = g.append("g")
           .attr("font-family", "sans-serif")
           .attr("font-size", 10)
           .attr("text-anchor", "end")
           .selectAll("g")
           .data(keys.slice().reverse())
           .enter().append("g")
           .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });

       legend.append("rect")
           .attr("x", width - 19)
           .attr("width", 19)
           .attr("height", 19)
           .attr("fill", z);

       legend.append("text")
           .attr("x", width - 24)
           .attr("y", 9.5)
           .attr("dy", "0.32em")
           .text(function (d) { return d; });


        function change(data)
        {
          console.log(data)
        x0.domain(data.map(function (d) { return d.key; }));
        x1.domain(keys).rangeRound([0, x0.bandwidth()]);
        // y.domain([0, d3.max(data, function (d) { return d3.max(keys, function (key) { return d[key]; }); })]).nice();
        y.domain([0, 100]).nice();

       svg.select(".y.axis").remove();
       svg.select(".x.axis").remove();


        g.append("g")
            .selectAll("g")
            .data(data)
            .enter().append("g")
            .attr("transform", function (d) { return "translate(" + x0(d.Department) + ",0)"; })
            .selectAll("rect")
            .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter().append("rect")
            .attr("x", function (d) { return x1(d.key); })
            .attr("y", function (d) { return y(d.value); })
            .attr("width", x1.bandwidth())
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return z(d.key); });

        g.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        g.append("g")
            .attr("class", "y axis")
            .call(yAxis.ticks(null, "s"))
            .append("text")
            .attr("x", 250)
            .attr("y", y(y.ticks().pop()) + 0.5)
            .attr("dy", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("Average Attendance of Departments")
            .attr("font-size",20)
            .style('fill', 'rgb(0,0,255,1)');

            bar.exit().remove();

                    // updated data:
                    // bar.transition()
                    //         .duration(750)
                    //         .attr("x", function(d) { return 0; })
                    //         .attr("y", function(d) { return y(d.ModuleCode); })
                    //         .attr("height", function(d) { return x(d.avgAtt); })
                    //         .attr("width", x.bandwidth());
          }

  </script>
  </html>

我在向上述分组图表添加下拉菜单时遇到问题。谁能帮我这个。此代码的一部分来自其他来源，以创建下拉列表。它在简单的条形图上起到了吸引作用，但是由于我是两个x轴x0和x1的新手，所以我在更改功能中停留在第二行。如果只有一个轴，那么我会以某种方式使简单的条形图起作用。

修改前的原始代码如下：

<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="L4F - Axes and scales ">
  <title>SVG</title>
  <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  <body>
    <svg width="960" height="500"></svg>
  </body>
  <script>
    var svg = d3.select("svg"),
            margin = { top: 20, right: 20, bottom: 30, left: 40 },
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var x0 = d3.scaleBand()
            .rangeRound([0, width])
            .paddingInner(0.1);

        var x1 = d3.scaleBand()
            .padding(0.05);

        var y = d3.scaleLinear()
            .rangeRound([height, 0]);
// "#98abc5", "#8a89a6", "#7b6888", "#6b486b",
        var z = d3.scaleOrdinal()
            .range([ "rgba(255, 99, 132, 0.5)", "rgba(153, 102, 255, 0.5)", "rgba(54, 162, 235, 0.5)"])
        var vals = '[{"Department":"CAM","UG":"71","PG":"81","Foundation":"55"},{"Department":"CSIS","UG":"66","PG":"80","Foundation":"43"},{"Department":"GAV","UG":"60","PG":"77","Foundation":"50"}]'
        data = JSON.parse(vals);
        // data=[{"Department":"CAM","UG":"75","PG":"83","Foundation":"52"}]
        console.log(data)
        var keys = Object.keys(data[0]).slice(1);

        x0.domain(data.map(function (d) { return d.Department; }));
        x1.domain(keys).rangeRound([0, x0.bandwidth()]);
        y.domain([0, d3.max(data, function (d) { return d3.max(keys, function (key) { return d[key]; }); })]).nice();

        g.append("g")
            .selectAll("g")
            .data(data)
            .enter().append("g")
            .attr("transform", function (d) { return "translate(" + x0(d.Department) + ",0)"; })
            .selectAll("rect")
            .data(function (d) { return keys.map(function (key) { return { key: key, value: d[key] }; }); })
            .enter().append("rect")
            .attr("x", function (d) { return x1(d.key); })
            .attr("y", function (d) { return y(d.value); })
            .attr("width", x1.bandwidth())
            .attr("height", function (d) { return height - y(d.value); })
            .attr("fill", function (d) { return z(d.key); });

        g.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x0));

        g.append("g")
            .attr("class", "axis")
            .call(d3.axisLeft(y).ticks(null, "s"))
            .append("text")
            .attr("x", 250)
            .attr("y", y(y.ticks().pop()) + 0.5)
            .attr("dy", "0.32em")
            .attr("fill", "#000")
            .attr("font-weight", "bold")
            .attr("text-anchor", "start")
            .text("Average Attendance of Departments")
            .attr("font-size",20)
            .style('fill', 'rgb(0,0,255,1)');

        var legend = g.append("g")
            .attr("font-family", "sans-serif")
            .attr("font-size", 10)
            .attr("text-anchor", "end")
            .selectAll("g")
            .data(keys.slice().reverse())
            .enter().append("g")
            .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });

        legend.append("rect")
            .attr("x", width - 19)
            .attr("width", 19)
            .attr("height", 19)
            .attr("fill", z);

        legend.append("text")
            .attr("x", width - 24)
            .attr("y", 9.5)
            .attr("dy", "0.32em")
            .text(function (d) { return d; });
  </script>
  </html>

输出为：Grouped bar before drop down

我想要的输出是通过使用下拉菜单输入不同的数据来更新条形图。由于我对d3.js的了解非常有限，因此非常感谢任何帮助或指向带有过滤器的工作组条形图的任何链接。谢谢。

javascript d3.js bar-chart
1个回答
0
投票
d3.js您可以检查提及URL，我认为这与您期望的与更改数据完全相同，希望此链接可以为您提供帮助。

[如果您不理解，请提及URL d3.JS代码，以便您可以通过邮件与我联系，以便我详细说明。

谢谢。give me your mail ID

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.