如何用D3绘制箭头（响应）

Question

我想通过使用D3.js版本3绘制温度计类型的条。我已经完成了绘制带有两种填充颜色的基本响应矩形。但是我有问题找出箭头。我在下面添加了截图和代码。谢谢你的亲切帮助！

＆＃13;

＆＃13;

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    
    <style>
    #temp_pue_wrapper {
        position: relative;
        height: 0;
        width: 100%;
        padding: 0;
        /* padding-bottom will be overwritten by JavaScript later */
        padding-bottom: 100%;
    }
    #temp_pue_wrapper > svg {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }
    </style>
    <div id="temp_pue_wrapper"></div>
    
    <script>
    var width = 500,
        height = 30,
        tmp_wrapper = d3.select("#temp_pue_wrapper")
            .attr(
                "style",
                "padding-bottom: " + Math.ceil(height * 85 / width) + "%"
            )
            .append("svg")
            .attr("viewBox", "0 0 " + width + " " + height);
    		
    var gradient = tmp_wrapper.append("defs")
    	  .append("linearGradient")
    		.attr("id", "gradient")
    		.attr("x1", "0%")
    		.attr("y1", "0%")
    		.attr("x2", "100%")
    		.attr("y2", "0%")
    		.attr("spreadMethod", "pad");
    
    gradient.append("stop")
        .attr("offset", "0%")
        .attr("stop-color", "#228582")
        .attr("stop-opacity", 1);
    
    gradient.append("stop")
        .attr("offset", "50%")
        .attr("stop-color", "#228582")
        .attr("stop-opacity", 1);
    	
    gradient.append("stop")
        .attr("offset", "50%")
        .attr("stop-color", "#C23439")
        .attr("stop-opacity", 1);	
    
    gradient.append("stop")
        .attr("offset", "100%")
        .attr("stop-color", "#C23439")
        .attr("stop-opacity", 1);	
    	
    tmp_wrapper.append('rect')
    		.attr("width", "100%")
    		.attr("height", "100%")
    		.attr("fill", "url(#gradient)");
    		
    </script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我通过使用三角形和线图来弄清楚它。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    
    <style>
    #temp_pue_wrapper {
        position: relative;
        height: 0;
        width: 100%;
        padding: 0;
        /* padding-bottom will be overwritten by JavaScript later */
        padding-bottom: 100%;
		
    }
    #temp_pue_wrapper > svg {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }
	
  

	path {
		fill: none;

	}	
    </style>
    <div id="temp_pue_wrapper"></div>
	

    <script>
    var width = 500,
        height = 30,
        tmp_wrapper = d3.select("#temp_pue_wrapper")
            .attr(
                "style",
                "padding-bottom: " + Math.ceil(height * 80 / width) + "%"
            )
            .append("svg")
            .attr("viewBox", "0 0 " + width + " " + height);
				
    		
    var gradient = tmp_wrapper.append("defs")
    	  .append("linearGradient")
    		.attr("id", "gradient")
    		.attr("x1", "0%")
    		.attr("y1", "0%")
    		.attr("x2", "100%")
    		.attr("y2", "0%")
    		.attr("spreadMethod", "pad");
    
    gradient.append("stop")
        .attr("offset", "0%")
        .attr("stop-color", "#228582")
        .attr("stop-opacity", 1);
    
    gradient.append("stop")
        .attr("offset", "50%")
        .attr("stop-color", "#228582")
        .attr("stop-opacity", 1);
    	
    gradient.append("stop")
        .attr("offset", "50%")
        .attr("stop-color", "#C23439")
        .attr("stop-opacity", 1);	
    
    gradient.append("stop")
        .attr("offset", "100%")
        .attr("stop-color", "#C23439")
        .attr("stop-opacity", 1);	

	tmp_wrapper.append('rect')
    		.attr("width", "88.8%")
    		.attr("height", "100%")
    		.attr("x", "29px")
    		.attr("y", "0px")			
    		.attr("fill", "url(#gradient)")
			.attr("class","foo");
			
	tmp_wrapper.append("svg:path")  // Fixed.
		 .attr("d", d3.svg.symbol().type("triangle-up").size(400))
		 .style("fill", "#228582")
		 .attr ("transform", "translate(17,15) rotate (-90)");
 			
	tmp_wrapper.append("svg:path")  // Fixed.
		 .attr("d", d3.svg.symbol().type("triangle-up").size(400))
		 .style("fill", "#C23439")
		 .attr ("transform", "translate(485,15) rotate (90)"); 

			

		//This is the accessor function we talked about above
	var lineFunction = d3.svg.line()
	  .x(function(d) { return d.x; })
	  .y(function(d) { return d.y; })
	  .interpolate('linear');

	//The data for our line
	var lineData = [ 
	  { "x": -5,   "y": 0},  
	  { "x": 20,  "y": 0},
	  { "x": -5,  "y": 15}, 
	  { "x": 20,  "y": 30},
	  { "x": -5,  "y": 30},  
	  { "x": -30, "y": 15},
	  { "x": -5, "y": 0}

	];
	  
	//The line SVG Path we draw
	var lineGraph = tmp_wrapper.append("path")
	  .attr("d", lineFunction(lineData))
	  .style("fill", "#228582");	

 	var lineGraph1 = tmp_wrapper.append("path")
	  .attr("d", lineFunction(lineData))
	  .style("fill", "#C23439")
	  .attr ("transform", "translate(502,30) rotate(180)");	
   		
    </script>