Question

我正在尝试创建一个类似于Illustrator创建的设计的D3图形（Good Image 1），但是我所能获得的最接近的位置是第二个图形（Bad Image 2）。

我真的是D3的新手，并且一般来说都创建SVG，所以我可能会犯错。下面的代码是我能够在网上找到/找到的代码。看来我无法使用CSS定位直接调整元素本身的定位？我尝试通过html添加类，也尝试在JQuery中使用$（。myClass）.css ...添加类，但是我所做的一切都完全无效。似乎唯一有效的方法是变换，但它很丑陋，如第二张图片所示。

var margin = { left:10, right:10, top:10, bottom:10 };

var width = 400 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var g = d3.select("#pyramid-chart-area")
    .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 + ")");

d3.json("../data/pyramid_hp.json").then(function(data){
    data.forEach(function(d){
        d.hp = +d.hp;
    });

    var x = d3.scaleBand()
        .domain(data.map(function(d){ return d.hp; }))
        .range([0, width])
        .paddingInner(0.3)
        .paddingOuter(0.3);

    var y = d3.scaleLinear()
        .domain([0, d3.max(data, function(d){
            return d.hp;
        })])
        .range([height, 0]);

    var xAxisCall = d3.axisBottom(x);
    g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxisCall)
        .selectAll("text")
            .attr("y", "10")
            .attr("x", "-5")
            .attr("text-anchor", "end")
            .attr("transform", "rotate(-40)");

    var yAxisCall = d3.axisLeft(y)
        .ticks(3)
        .tickFormat(function(d){
            return d;
        });


    g.append("g")
        .attr("class", "y-axis")
        .call(yAxisCall);


    var arc = d3.symbol().type(d3.symbolTriangle)
                .size(function(d){ return scale(d.hp); });

    var scale = d3.scaleLinear()
        .domain([0, 5])
        .range([0, width]);

    var colors = d3.scaleLinear()
    .domain(d3.extent(data, function(d) {return d.hp}))
    .range([
        '#ffffff',        
        '#303030'        
    ]);

    var group = g.append('g')
                .attr('transform','translate('+ 192 +','+ 320 +')')
                .attr('class', 'triangle-container');


    var line = group.selectAll('path')
            .data(data)
            .enter()
            .append('path')
            .attr('d', arc)
            // .attr('fill',function(d){ return colorscale(d.hp); })
            .attr('fill', d => colors(d.hp))
            .attr('stroke','#000')
            .attr('stroke-width', 1)
            .attr('class', 'triangle')
            .attr('transform',function(d,i){ return "translate("+ (i * 20) +","+(i * 10)+")"; });

Answer 1

您可以放置符号，但是它比较棘手-符号大小代表区域，并且rioV8注意符号位于其中心。但是，如果您可以弄清楚三角形的属性，我们可以相对容易地放置它。

对于等边三角形，您需要了解给定边的长度以及该质心的高度（三角形高度/ 3）。因此，这些功能可能会很有用：

// get length of a side/width of upright equilateral triangle from area:
function getWidth(a) {
    return Math.sqrt(4 * a / Math.sqrt(3));
}
// get height of the triangle from length of a side
function getHeight(l) {
    return Math.sqrt(3)*l/2;
}

使用质心的高度，我们可以将圆放置在所需位置，例如：

y = SVGheight - SymbolHeight/3 - marginBottom;

这里不需要缩放。

每个符号的x值确实需要缩放以使其按您的喜好排列。下面，我使用任意范围为[width/10,0]的线性刻度，在这种情况下，分母将改变水平偏斜，可能有更好的方法对此进行微调。

通过此操作，您可以达到所需的结果：

为简单起见，下面我使用代表像素区域的数据（因为您没有显示任何数据）-如果缩放区域，则缩放比例必须包含在高度和宽度计算中。 我还在每个三角形的顶部都包括了一些圆圈，以供可能使用标签，因为我们知道三角形的尺寸，现在这很简单了

var margin = { left:10, right:10, top:10, bottom:10 };

var width = 400 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var g = d3.select("body")
  .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 + ")")


var data = [
	{a: 40000},
	{a: 30000},
	{a: 20000},
	{a: 10000}
];

function getWidth(a) {
	return Math.sqrt(4 * a / Math.sqrt(3));
}
function getHeight(l) {
	return Math.sqrt(3)*l/2;
}

data.forEach(function(d) {
	d.w = getWidth(d.a);
	d.h = getHeight(d.w);
})

var x = d3.scaleLinear()
  .domain(d3.extent(data, function(d){ return d.w; }) )
  .range([width/10,0]);


var arc = d3.symbol().type(d3.symbolTriangle)
   .size(function(d){ return d.a; });

var colors = d3.scaleLinear()
 .domain(d3.extent(data, function(d) {return d.a}))
 .range(['#ffffff','#303030']);

var group = g.append('g')
 .attr('transform','translate('+ width/2 +',0)') 
 .attr('class', 'triangle-container');

var line = group.selectAll('path')
  .data(data)
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', d => colors(d.a))
  .attr('class', 'triangle')
  .attr('transform',function(d,i){ return "translate("+ x(d.w) +","+ (height - d.h/3 - margin.bottom )  +")"; });

var circles =  group.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return x(d.w); })
  .attr("cy", function(d) { return height - d.h - margin.bottom; })
  .attr("r", 3);

 <script src='https://d3js.org/d3.v5.min.js' type='text/javascript'></script>

轴可能会带来一些挑战

D3三角形定位到精确点

1 个答案: