亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

D3 v4:圖表工具:如何在列后面發送水平網格線

D3 v4:圖表工具:如何在列后面發送水平網格線

皈依舞 2022-01-13 15:42:38
我正在使用D3 charting tool. 問題是我無法在列后面發送水平網格線。請看截圖。這里的這種方法確實將網格線發送到條形后面,但同時,所有列標簽都消失了!請看下面的截圖:代碼public function evd_unitary_growth_plan_chart( $data_str ){        ob_start(); ?>        <style> /* set the CSS */            .line {                fill: none;                stroke: steelblue;                stroke-width: 2px;            }            .grid line {                stroke: lightgrey;                stroke-opacity: 0.6;                shape-rendering: crispEdges;            }            .grid path {                stroke-width: 0;            }            .axis {                font-size: 13px;                font-family: 'Roboto';                color: #394041;            }        </style>        <script type="text/javascript">            var h = 300;            var w = 750;            var barPadding = 2;            function barColor(data_month, current_month) {                if( parseInt(data_month) >= current_month)                    return "#008600";                else                    return "#c4c4c4";            }            // set the dimensions and margins of the graph            var margin = {top: 30, right: 20, bottom: 30, left: 40},                width = w - margin.left - margin.right,                height = h - margin.top - margin.bottom;            var data = <?php echo $data_str ?>;            // set the ranges            var x = d3.scaleBand().range([0, width]).padding(0.2);            var y = d3.scaleLinear().range([height, 0]);            var svg = d3.select("#ecbg_unitary").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 + ")");    
查看完整描述

1 回答

?
largeQ

TA貢獻2039條經驗 獲得超8個贊

JDunken 是對的,你畫東西的順序將決定什么在什么之上,所以你想在矩形之前做水平線,讓它們出現在矩形的后面。

如果那會弄亂您的標簽,則可能與我在您的另一篇文章中提出的關于不僅"text"對列標簽使用選擇的觀點有關。

請記住,當您在<svg>這些軸上添加軸時,通常包含<text>元素,因此當您稍后調用svg.selectAll("text") 準備綁定列標簽時,此選擇很有可能會<text>在您的軸中拾取一些元素,從而產生不可預測的結果!svg.selectAll("text")會這樣做 -<text>選擇svg.

您可以改為選擇為列標簽保留的類,例如:

svg.selectAll(".column-label")
                .data(data)
                .enter()
                .append("text")
                .attr("class","column-label")

希望有幫助


查看完整回答
反對 回復 2022-01-13
  • 1 回答
  • 0 關注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號