Question

我最近建立了一个小的热图，其单个单元在页面加载后通过淡入淡出出现：

https://codepen.io/ChrisBean/pen/KKwpmjb

通过将单元格的初始不透明度值设置为0来触发淡入动画

sort_value

截至目前，单元格从底部到顶部逐列淡入。我希望它们从左到右逐行淡入。这是我的目标，通过在ThinkPad上用钢笔画快速可视化：

有人能在转换触发器中向正确的方向推动我改变方向吗？

Answer 1

在D3中没有“过渡方向” 这样的东西。这里的整个问题是您正在使用元素的索引来设置延迟。话虽如此，只需更改data数组内对象的顺序，即可使索引与所需方向匹配。

例如：

data.sort(function(a,b){
    return myVars.indexOf(b.variable) - myVars.indexOf(a.variable) || 
        myGroups.indexOf(a.group) - myGroups.indexOf(b.group)
});

以下是具有此更改的代码：

// set the dimensions and margins of the graph
const margin = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
};
const width = 400 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
// eslint-disable-next-line no-undef
const svg = d3.select('#my_dataviz')
  .append('svg')
  .attr('viewBox', '0 0 900 320')
  .append('g')
  .attr('transform',
    `translate(${margin.left},${margin.top})`);

// Labels of row and columns
const myGroups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
const myVars = ['v1', 'v2', 'v3', 'v4', 'v5', 'v6', 'v7', 'v8', 'v9', 'v10'];

// Build X scales and axis:
const x = d3.scaleBand()
  .range([0, width])
  .domain(myGroups)
  .padding(0.00);
svg.append('g')
  .attr('transform', `translate(0,${height})`)
  .call(d3.axisBottom(x));

// Build X scales and axis:
const y = d3.scaleBand()
  .range([height, 0])
  .domain(myVars)
  .padding(0.00);
svg.append('g')
  .call(d3.axisLeft(y));

// Build color scale
const myColor = d3.scaleLinear()
  .range(['white', '#363636'])
  .domain([1, 100]);

// Read the data
d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv', (data) => {
  data.sort(function(a, b) {
    return myVars.indexOf(b.variable) - myVars.indexOf(a.variable) || myGroups.indexOf(a.group) - myGroups.indexOf(b.group)
  });
  // create a tooltip
  const tooltip = d3.select('#my_dataviz')
    .append('div')
    .style('opacity', 0)
    .attr('class', 'tooltip')
    .style('background-color', 'white')
    .style('border', 'solid')
    .style('border-width', '2px')
    .style('border-radius', '5px')
    .style('padding', '5px');

  // Three function that change the tooltip when user hover / move / leave a cell
  const mouseover = function() {
    tooltip.style('opacity', 1);
  };
  const mousemove = function(d) {
    tooltip
      .html(`Client Branch:${d.value} <br>
             Project:   <br>`)
      .style('left', `${d3.mouse(this)[0] + 70}px`)
      .style('top', `${d3.mouse(this)[1]}px`);
  };
  const mouseleave = function() {
    tooltip.style('opacity', 0);
  };

  // add the squares
  const squares = svg.selectAll()
    .data(data, (d) => `${d.group}:${d.variable}`)
    .enter()
    .append('rect')
    .attr('x', (d) => x(d.group))
    .attr('y', (d) => y(d.variable))
    .attr('width', x.bandwidth())
    .attr('height', y.bandwidth())
    .style('fill', (d) => myColor(d.value))
    .style('opacity', 0)
    .on('mouseover', mouseover)
    .on('mousemove', mousemove)
    .on('mouseleave', mouseleave);

  squares.transition()
    .duration(1000)
    .delay((_d, i) => i * 200)
    .style('opacity', 1);
});

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>


<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

更改D3动画的方向/过渡？

1 个答案: