D3 响应图表

Question

我想在 D3.js 中创建响应式图表而不使用 viewBox。我想避免它，因为我在向图表添加工具提示时遇到了一些问题。我从一个很棒的 tutorial 开始，但我不能继续遵循相同的逻辑。任何人都可以帮助我为什么不绘制两条线（const 轴，absAxis）？我尝试 join/append 到 svg，到 rect，但是没有用。

function myResponsiveChart(container, props) {

const  { width, height } = props;

let svg = container.selectAll('svg').data([null]);
    svg = svg.enter().append('svg').merge(svg)
        .attr('width', width)
        .attr('height', height);

const rect = svg.selectAll('rect').data([null]);
    rect.enter().append('rect').merge(rect)
        .attr('width', width)
        .attr('height', height)
        .attr('rx', 100);

  const fontSize = 16,
      hPix = height/6,
      margin = { top: hPix/2, bottom: hPix/2, left: hPix/10, right: hPix/2 };


//DELTA
//svg.append('line').merge(svg)
const axis = svg.selectAll('line').data([null]);
      axis.join('line').append('line').merge(axis) 
        .attr("x1", margin.left)
        .attr("x2", width)
        .attr("y1", margin.top)
        .attr("y2", margin.top)
        .attr("class", "diff_axis");

let axis = svg.select('line').data([null]);
  axis.enter().append('line').merge(axis) 
    .attr("x1", margin.left)
    .attr("x2", width)
    .attr("y1", margin.top)
    .attr("y2", margin.top)
    .attr("class", "diff_axis");

//ABSOLUTE
//svg.append('line').merge(svg)
let absAxis = svg.selectAll('line').data([null]);
  absAxis.enter().append('line').merge(absAxis) 
    .attr("x1", margin.left)
    .attr("x2", width)
    .attr("y1", margin.top + hPix)
    .attr("y2", margin.top + hPix)
    .attr("class", "diff_axis")
    .attr("id", "abs");
}

function render() {

    myResponsiveChart(d3.select('body'), {
      width: document.body.clientWidth,
      height: document.body.clientHeight
  });
}

render();
window.addEventListener('resize', render);

body {
      position: fixed;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: 0px;
      padding: 0px;
  }

.diff_axis {
    stroke: red;
    stroke-width: 6;
}

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

强文本

Answer 1

这个有效定义约束时，您不能重新定义它或更改它的值。

function myResponsiveChart(container, props) {

const  { width, height } = props;

let svg = container.selectAll('svg').data([null]);
    svg = svg.enter().append('svg').merge(svg)
        .attr('width', width)
        .attr('height', height);

const rect = svg.selectAll('rect').data([null]);
    rect.enter().append('rect').merge(rect)
        .attr('width', width)
        .attr('height', height)
        .attr('rx', 100);

  const fontSize = 16,
      hPix = height/6,
      margin = { top: hPix/2, bottom: hPix/2, left: hPix/10, right: hPix/2 };


//DELTA
//svg.append('line').merge(svg)
const axis = svg.selectAll('line').data([null]);
      axis.join('line').append('line').merge(axis) 
        .attr("x1", margin.left)
        .attr("x2", width)
        .attr("y1", margin.top)
        .attr("y2", margin.top)
        .attr("class", "diff_axis");

//ABSOLUTE
//svg.append('line').merge(svg)
let absAxis = svg.selectAll('line').data([null]);
  absAxis.enter().append('line').merge(absAxis) 
    .attr("x1", margin.left)
    .attr("x2", width)
    .attr("y1", margin.top + hPix)
    .attr("y2", margin.top + hPix)
    .attr("class", "diff_axis")
    .attr("id", "abs");
}

function render() {

    myResponsiveChart(d3.select('body'), {
      width: document.body.clientWidth,
      height: document.body.clientHeight
  });
}

render();
window.addEventListener('resize', render);

body {
      position: fixed;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: 0px;
      padding: 0px;
  }

.diff_axis {
    stroke: red;
    stroke-width: 6;
}

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

D3 响应图表

D3 Responsive chart

svg

resize

data-visualization

d3.js

responsive