小编Cen*_*321的帖子

d3js在饼图周围重新分发标签

我正在使用d3.js创建一个带有外部标签的圆环图.使用基于饼图的每个切片的质心的一些三角法,我定位标签.

g.append("g")
        .attr("class", "percentage")
        .append("text")
            .attr("transform", function(d)
                { 
                    var c = arc.centroid(d);
                    var x = c[0];
                    var y = c[1];
                    var h = Math.sqrt(x*x + y*y);
                    return "translate(" + (x/h * obj.labelRadius) +  ',' + (y/h * obj.labelRadius) +  ")"; 
                }
            ) 
            .attr("dy", ".4em")
            .attr("text-anchor", function(d) 
                {
                    return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start";
                }
            )
            .text(function(d) { return d.data.percentage+"%"; });
Run Code Online (Sandbox Code Playgroud)

我最终要完成的是重新排列饼图边缘之外的标签,以防止重叠.

在此输入图像描述

我试图解决问题的方法之一是定义设置"锚点",其中可以定位标签,保证它们不会重叠.问题是将质心映射到锚点并保留切片和标签之间的一些视觉对应感(当切片很细时特别困难).

在此输入图像描述

上图显示了锚点的可能位置(所示切片的质心).有了这些位置,就不可能有重叠.

增加问题的复杂性的事实是,当标签(它们是水平的)靠近饼的顶部或底部时,它们比在饼的右侧或左侧更容易重叠.

关于如何解决这个问题的任何想法?

[编辑]根据meetamit的建议,我实施了以下内容:

.attr("dy", function(d)
{
    var c = arc.centroid(d);
        var x = …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js

7
推荐指数
1
解决办法
3273
查看次数

如何拥有单独的身份验证源?(一个用于Oauth2,一个用于基于表单的登录)

我正在编写一个具有链接到数据库的身份验证的小应用程序,此身份验证将由Oauth2方面管理(由@EnableAuthorizationServer和@EnableResourceServer注释的类).管理页面在同一个应用程序中有另一个身份验证,它将链接到另一个不同的数据库,并将使用正常的基于表单的身份验证.

我为此特定目的编写了以下Web安全配置类:

@Configuration
@EnableWebSecurity
public class WebSecurityConfig{

    @Configuration
    @Order(5)
    public static class AdminSecurityConfig extends WebSecurityConfigurerAdapter {

        @Override
        protected void configure(HttpSecurity http) throws Exception {

            http.logout().logoutRequestMatcher(new AntPathRequestMatcher("/admin_logout"))
                    .invalidateHttpSession(true).logoutSuccessUrl("/admin/login.html");

            http.authorizeRequests()
                    .antMatchers("/admin/login.html").permitAll().antMatchers("/admin/protected.html")
                    .hasRole("ADMIN")
                    .and().formLogin().loginPage("/admin/login.html")
                    .loginProcessingUrl("/admin_login").defaultSuccessUrl("/admin/protected.html");

        }

        @Override
        public void configure(AuthenticationManagerBuilder auth) throws Exception {
            //Data source for form based auth
            auth.inMemoryAuthentication().withUser("adminuser").password("adminpassword").roles("ADMIN");
        }
    }
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        //Data source for Oauth
        auth.inMemoryAuthentication().withUser("myuser").password("mypassword").roles("USER").and().withUser("test")
                .password("testpassword").roles("USER");
    }
}
Run Code Online (Sandbox Code Playgroud)

其他相关组件是:

授权服务器配置:

@Configuration
@EnableAuthorizationServer
public class AuthorizationServerConfiguration extends AuthorizationServerConfigurerAdapter{

    @Autowired
    AuthenticationManager authenticationManager;

    @Override
    public …
Run Code Online (Sandbox Code Playgroud)

authentication spring oauth spring-security spring-security-oauth2

7
推荐指数
1
解决办法
1320
查看次数

p:ajax更新不能与p:selectBooleanCheckbox一起使用

我正在使用JSF 2和Primefaces 4并且有以下问题:

我的XHTML中有以下代码:

<h:form id="form">
<table>  
    <tr id="formats">
        <td>Formats</td>
        <td>
            <p:selectBooleanCheckbox value="#{bean.entity.formatted}">
                <p:ajax event="change" update="formatsSelect" /> 
            </p:selectBooleanCheckbox>
            <p:selectOneMenu id="formatsSelect" rendered="#{bean.entity.formatted}">
                <f:selectItems value="#{bean.formats}" />
            </p:selectOneMenu> 
        </td>
    </tr>
</table>
</h:form>
Run Code Online (Sandbox Code Playgroud)

它输出一个复选框和一个选择菜单,我期望的是,当我选中复选框时,选择菜单应该出现,并且当我取消选中它时应该消失....但没有任何反应,我检查并取消选中它,选择菜单不受影响.

理论上这应该有效,因为selectBooleanCheckbox值绑定到entity.formatted布尔值,selectOneMenu中的呈现值绑定到entity.formatted值,p:ajax指向update属性和事件中的正确id是正确的.我知道的最后一点,因为我在我的bean中创建了一个监听器,它打印了格式化的值:

public void changeListener(){
    System.out.println(this.entity.isFormatted());
}
Run Code Online (Sandbox Code Playgroud)

并将p:ajax更改为:

<p:ajax event="change" update="formatsSelect" listener="#{bean.changeListener}" /> 
Run Code Online (Sandbox Code Playgroud)

它打印出控制台中格式化的值.我究竟做错了什么?

ajax jsf primefaces

4
推荐指数
1
解决办法
3万
查看次数

在Phonegap中缓慢的JQuery Mobile面板

我正在JQM中为Phonegap应用程序实现一个幻灯片面板,但由于某些原因,当我打开它时,尝试在Android 4.x上打开它需要1500毫秒才会出现,但在Android 2.x,iOS和Blackberry中它立即显示.

$(document).on("touchstart","img#openLeft", function()
{
     $('#mydiv').panel("toggle");
}
Run Code Online (Sandbox Code Playgroud)

您能否告诉我在不删除滑动动画的情况下,我可以遵循哪种策略来使面板显得更快?

谢谢!

PS我正在使用JQuery Mobile 1.3.0

panel jquery-mobile cordova

2
推荐指数
1
解决办法
3863
查看次数