酒吧堆放在一处

Question

谁能告诉我如何在堆积在某一特定位置的条形之间提供间隙？这是代码： P.s：抱歉，我尝试过，但由于某些错误“请添加一些解释”，无法将其作为代码片段发布

Answer 1

@Samrat-将

rect

附加到您的

svg

时，请将代码中的这一行

.attr("x"), function(d,i){return x(i)})

更改为

.attr("x", (d, i) => i * (svgWidth / info.length))

。此代码将整个 svg 宽度除以数据集的长度，并将每个值乘以其索引，该索引使条形图彼此之间保持距离。

Fiddle供您参考：https://jsfiddle.net/zfjcLopw/1/

这是更新后的代码：

<!DOCTYPE html>

<html>
  <head>
    <title>test</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <script>
      const width = 600;
      const height = 500;
      const margin = { top: 100, right: 100, bottom: 100, left: 120 };
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
      const barPadding = 2;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      const tag = ["mango", "banana", "apple", "lemon", "coconut"];
      const info = [23, 54, 34, 51, 22];

      const xScale = d3
        .scaleBand()
        .domain(tag.map(d => d))
        .rangeRound([0, innerWidth]);

      const yScale = d3
        .scaleLinear()
        .domain([0, d3.max(info, d => d)])
        .range([innerHeight, 0]);

      const mainG = svg
        .append("g")
        .attr("transform", `translate(${margin.left}, ${margin.top})`);

      const g = mainG
        .selectAll("g")
        .data(info)
        .enter()
        .append("g")
        .attr("transform", `translate(0,0)`);

      g.append("rect")
        .attr("x", (d, i) => i * (innerWidth / info.length))
        // .attr("x", (d, i) => xScale(i)) - This line will stack bars on top of each other
        .attr("y", d => yScale(d))
        .attr("width", innerWidth / info.length - barPadding)
        .attr("height", d => innerHeight - yScale(d))
        .attr("fill", "blue");

      mainG.append("g").call(d3.axisLeft(yScale));
      mainG
        .append("g")
        .call(d3.axisBottom(xScale))
        .attr("transform", `translate(0, ${innerHeight})`);
    </script>
  </body>
</html>

Answer 2

X

scaleBand

域设置为标签值，但您可以使用

索引来调用它。试试

x(tag[i])

酒吧堆放在一处

问题描述投票：0回答：2

2个回答

最新问题

酒吧堆放在一处

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2