第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使這個 D3 水平條形圖工作？

如何使這個 D3 水平條形圖工作？

楊__羊羊 2021-12-02 19:59:41
最近我開始學(xué)習(xí) D3.js v5，我必須制作不同類型的圖表。其中一個圖形是堆疊的水平條形圖。我在 Udemy 中學(xué)習(xí)了一個教程，但我無法使此圖表正常工作。有人可以幫我嗎？所以，我知道 d3 使用堆棧生成器來生成堆積條形圖。我使用它并檢查控制臺中的值似乎數(shù)據(jù)格式很好并且可以開始生成堆積條形圖但我似乎無法理解為什么它不起作用。<html><script src="https://d3js.org/d3.v5.min.js"></script><body></body><script type="text/javascript">var Margin = {top: 30, right: 20, bottom: 40, left: 110};var InnerWidth = 432 - Margin.left - Margin.right;var InnerHeight = 432 - Margin.top - Margin.bottom;var diff_variant=[{Missense_Mutation: 5, Silent: 4, Splice_Site: 0},      {Missense_Mutation: 8, Splice_Site: 0, Silent: 0},      {Splice_Site: 4, Missense_Mutation: 4, Silent: 0},      {Missense_Mutation: 4, Silent: 1, Splice_Site: 0},      {Missense_Mutation: 5, Splice_Site: 0, Silent: 0},      {Missense_Mutation: 5, Splice_Site: 0, Silent: 0},      {Missense_Mutation: 4, Splice_Site: 0, Silent: 0},      {Missense_Mutation: 4, Splice_Site: 0, Silent: 0},      {Silent: 1, Missense_Mutation: 1, Splice_Site: 0},      {Missense_Mutation: 1, Splice_Site: 0, Silent: 0}];var data1=[{name: "Missense_Mutation", count: 41},           {name: "Silent", count: 6},           {name: "Splice_Site", count: 4}];var variant_name=["Missense_Mutation", "Splice_Site", "Silent"];var stack = d3.stack().keys(variant_name);var x = d3.scaleLinear()          .domain([0, d3.max(data1, function(d){return d.count;})])          .range([0,InnerWidth]);var x_axis = d3.scaleLinear()               .domain([0, d3.max(data1, function(d){return d.count;})])               .range([0,InnerWidth]);var y_axis = d3.scaleLinear()               .domain([0, data1.length])               .range([0,InnerWidth]);var y = d3.scaleBand()          .domain(data1.map(function(d){return d.name;}))          .rangeRound([0,InnerHeight])          .padding(0.1);
查看完整描述

1 回答

?
慕桂英3389331

TA貢獻(xiàn)2036條經(jīng)驗 獲得超8個贊

當(dāng)你這樣做...

var series = svg5.selectAll("g")//etc...

...您正在選擇<g>SVG 中已經(jīng)存在的元素（兩個軸）并將數(shù)據(jù)綁定到它們。這就是為什么您的輸入選擇為空的原因。

您可以選擇null（在此處閱讀更多相關(guān)信息）：

var series = svg5.selectAll(null)

或者您可以按類別選擇，稍后在輸入選擇中設(shè)置：

var series = svg5.selectAll(".foo")

但是，最好的解決方案是將軸組移到底部：這不僅可以解決您的問題，而且還會在矩形上方繪制軸。

這是帶有該更改的代碼：

<html>

  <script src="https://d3js.org/d3.v5.min.js"></script>


  <body></body>



  <script type="text/javascript">

    var Margin = {

      top: 30,

      right: 20,

      bottom: 40,

      left: 110

    };

    var InnerWidth = 432 - Margin.left - Margin.right;

    var InnerHeight = 432 - Margin.top - Margin.bottom;

    var diff_variant = [{

        Missense_Mutation: 5,

        Silent: 4,

        Splice_Site: 0

      },

      {

        Missense_Mutation: 8,

        Splice_Site: 0,

        Silent: 0

      },

      {

        Splice_Site: 4,

        Missense_Mutation: 4,

        Silent: 0

      },

      {

        Missense_Mutation: 4,

        Silent: 1,

        Splice_Site: 0

      },

      {

        Missense_Mutation: 5,

        Splice_Site: 0,

        Silent: 0

      },

      {

        Missense_Mutation: 5,

        Splice_Site: 0,

        Silent: 0

      },

      {

        Missense_Mutation: 4,

        Splice_Site: 0,

        Silent: 0

      },

      {

        Missense_Mutation: 4,

        Splice_Site: 0,

        Silent: 0

      },

      {

        Silent: 1,

        Missense_Mutation: 1,

        Splice_Site: 0

      },

      {

        Missense_Mutation: 1,

        Splice_Site: 0,

        Silent: 0

      }

    ];


    var data1 = [{

        name: "Missense_Mutation",

        count: 41

      },

      {

        name: "Silent",

        count: 6

      },

      {

        name: "Splice_Site",

        count: 4

      }

    ];


    var variant_name = ["Missense_Mutation", "Splice_Site", "Silent"];


    var stack = d3.stack().keys(variant_name);


    var x = d3.scaleLinear()

      .domain([0, d3.max(data1, function(d) {

        return d.count;

      })])

      .range([0, InnerWidth]);


    var x_axis = d3.scaleLinear()

      .domain([0, d3.max(data1, function(d) {

        return d.count;

      })])

      .range([0, InnerWidth]);


    var y_axis = d3.scaleLinear()

      .domain([0, data1.length])

      .range([0, InnerWidth]);


    var y = d3.scaleBand()

      .domain(data1.map(function(d) {

        return d.name;

      }))

      .rangeRound([0, InnerHeight])

      .padding(0.1);


    var svg5 = d3.select("body").append("svg")

      .attr("preserveAspectRatio", "xMinYMin meet")

      .attr("viewBox", `0 0 ${InnerWidth + Margin.left + Margin.right} ${InnerHeight + Margin.top + Margin.bottom}`)

      .style("background", "lightblue")

      .append("g")

      .attr("transform", "translate(" + Margin.left + "," + Margin.top + ")");


    var series = svg5.selectAll("g").data(stack(diff_variant))

      .enter().append("g")

      .style("fill", (d, i) => d3.schemeSet3[i]);


    series.selectAll("rect").data(function(d) {

        return d;

      })

      .enter().append("rect")

      .attr("height", 25)

      .attr("width", function(d) {

        return x(d[1]) - x(d[0]);

      })

      .attr("x", function(d) {

        return x(d[0]);

      })

      .attr("y", function(d, i) {

        return i * 40;

      });


    svg5.append("g").style("font", "12px sans").call(d3.axisLeft(y));

    svg5.append("g").attr('transform', `translate(0, ${InnerHeight})`).style("font", "12px times").call(d3.axisBottom(x_axis));


  </script>


</html>



查看完整回答
反對 回復(fù) 2021-12-02
  • 1 回答
  • 0 關(guān)注
  • 233 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號