d3 transform scale

d3 transform 中的 scale 变换可以用来实现 SVG 元素的缩放效果。通过设置一个缩放比例，可以将元素在 x 和 y 方向上进行缩放。

下面是实现 x 和 y 方向上不同缩放比例的示例代码：

// 沿 x 方向缩放 2 倍，y 方向缩放 1 倍
d3.select("#element")
  .attr("transform", "scale(2,1)");

在这里，scale 函数的两个参数分别表示 x 和 y 方向上的缩放比例，2 表示 x 方向上缩放 2 倍，1 表示 y 方向上不进行缩放。

如果只设置一个参数，则表示在 x 和 y 方向上等比例缩放，例如：

// 在 x 和 y 方向上等比例缩放 1.5 倍
d3.select("#element")
  .attr("transform", "scale(1.5)");

这里的参数 1.5 表示在 x 和 y 方向上同时缩放 1.5 倍。可以通过链式调用实现多个变换的组合，例如：

// 先平移 50,50，再在 x 和 y 方向上等比例缩放 1.5 倍
d3.select("#element")
  .attr("transform", "translate(50,50) scale(1.5)");

这里的 translate 表示先进行平移变换，再进行缩放变换。

相关问题

D3绘制交互式折线图

D3是一个强大的JavaScript库，可以用来创建交互式的折线图。下面是一个使用D3绘制交互式折线图的示例代码：

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 定义数据
var data = [
  { year: 2010, sale: 100 },
  { year: 2011, sale: 200 },
  { year: 2012, sale: 300 },
  { year: 2013, sale: 400 },
  { year: 2014, sale: 500 },
];

// 定义比例尺
var xScale = d3.scale.linear()
  .domain([2010, 2014])
  .range([0, 400]);

var yScale = d3.scale.linear()
  .domain([0, 500])
  .range([250, 0]);

// 定义折线生成器
var lineGen = d3.svg.line()
  .x(function(d) { return xScale(d.year); })
  .y(function(d) { return yScale(d.sale); });

// 绘制折线
svg.append("path")
  .attr("d", lineGen(data))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

// 添加坐标轴
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, 250)")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

这段代码首先创建了一个SVG容器，然后定义了一组数据。接下来，使用比例尺将数据映射到坐标轴上。然后，定义了一个折线生成器，用于生成折线的路径。最后，使用折线生成器绘制折线，并添加了坐标轴。

d3.js怎么将图表缩小

在d3.js中，可以通过设置svg元素的缩放比例来缩小图表。具体来说，可以使用d3.zoom()方法来创建缩放行为，并将其应用于svg元素上。然后，可以通过调用zoom.transform()方法来设置缩放比例。例如，以下代码将svg元素缩小到原来的一半：

// 创建缩放行为
var zoom = d3.zoom()
  .on("zoom", function() {
    svg.attr("transform", d3.event.transform);
  });

// 应用缩放行为到svg元素上
svg.call(zoom);

// 缩小svg元素到原来的一半
svg.call(zoom.transform, d3.zoomIdentity.scale(0.5));

上述代码中，d3.event.transform表示当前的缩放变换矩阵，可以通过设置它的scale属性来设置缩放比例。d3.zoomIdentity.scale(0.5)表示将缩放比例设置为0.5。调用zoom.transform()方法后，svg元素会相应地缩小。